Javascript ghi tập tin vào đĩa cục bộ

Có thể thực hiện thao tác đọc ghi trong tệp bằng một số câu lệnh. Nhưng mô-đun cần thiết để thực hiện các thao tác này phải được nhập. Mô-đun bắt buộc là 'fs' được gọi là mô-đun Hệ thống tệp trong JavaScript

Viết thao tác trên một tập tin

Sau khi tệp Hệ thống tệp được nhập, thao tác writeFile[] được gọi. Phương thức writeFile[] được sử dụng để ghi vào tệp trong JavaScript. Cú pháp của phương thức này như sau -

writeFile[path,inputData,callBackFunction]

Hàm writeFile[] chấp nhận ba tham số -

• Đường dẫn - Tham số đầu tiên là đường dẫn của tệp hoặc tên của tệp mà dữ liệu đầu vào sẽ được ghi vào

  Nếu đã có một tệp, thì nội dung trong tệp sẽ bị xóa và đầu vào do người dùng cung cấp sẽ được cập nhật hoặc nếu tệp không có, thì tệp có tệp đó sẽ được tạo trong đường dẫn đã cho và đầu vào

• inputData - Tham số thứ hai là dữ liệu đầu vào chứa dữ liệu được ghi trong tệp được mở

• callBackFuntion − Tham số thứ ba là hàm gọi lại hàm lấy lỗi làm tham số và hiển thị lỗi nếu thao tác ghi không thành công

ví dụ 1

Sau đây là một ví dụ về thao tác ghi vào tệp trong JavaScript

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

Nếu bạn mở tệp đầu vào, bạn có thể quan sát dữ liệu được viết trong đó như hình bên dưới -

Đọc từ tập tin

Sau khi mô-đun Hệ thống tệp được nhập, việc đọc tệp trong JavaScript có thể được thực hiện bằng cách sử dụng hàm readFile[]

cú pháp

Cú pháp để đọc từ một tệp như sau -

readFile[path, format, callBackFunc]

Hàm readFile[] chấp nhận ba tham số trong đó có một tham số tùy chọn

• Đường dẫn - Tham số đầu tiên là đường dẫn của tệp thử nghiệm mà từ đó nội dung sẽ được đọc. Nếu vị trí hoặc thư mục hiện tại là cùng thư mục chứa tệp sẽ được mở và đọc thì chỉ cần cung cấp tên tệp

• Định dạng - Tham số thứ hai là tham số tùy chọn là định dạng của tệp văn bản. Định dạng có thể là ASCII, utf-8, v.v.

• CallBackFunc − Tham số thứ ba là chức năng gọi lại lấy lỗi làm tham số và hiển thị lỗi được nêu ra do lỗi

ví dụ 2

Ví dụ sau cố gắng đọc nội dung của tệp được điền trong ví dụ trước và in nó -

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

đầu ra

Sau đây là đầu ra của ví dụ trên -

You are reading the content from Tutorials Point

Văn bản được hiển thị trong bảng điều khiển là văn bản trong tệp đã cho

ví dụ 3

Sau đây là một ví dụ kết hợp về cách đọc và ghi tệp ở trên bằng cách sử dụng mô-đun fs trên nút. js. Hãy để chúng tôi tạo một tệp JS có tên chính. js có đoạn mã sau -

API Truy cập Hệ thống Tệp cho phép các ứng dụng web đọc hoặc lưu các thay đổi trực tiếp vào các tệp và thư mục trên thiết bị của người dùng

Được đăng vào Thứ Ba, ngày 20 tháng 8 năm 2019 • Cập nhật vào Thứ Tư, ngày 2 tháng 11 năm 2022

Pete LePage

Pete là một người ủng hộ nhà phát triển

Thomas Steiner

Tom là một người ủng hộ nhà phát triển

Mục lục

• API truy cập hệ thống tệp là gì?
• Sử dụng API truy cập hệ thống tệp
  • Thử nó
  • Đọc một tệp từ hệ thống tệp cục bộ
  • Ghi tệp vào hệ thống tệp cục bộ
  • Chỉ định tên tệp được đề xuất và thư mục bắt đầu
  • Chỉ định mục đích của các bộ chọn tệp khác nhau
  • Lưu trữ xử lý tệp hoặc xử lý thư mục trong IndexedDB
  • Xử lý tệp hoặc thư mục được lưu trữ và quyền
  • Mở một thư mục và liệt kê nội dung của nó
  • Tạo hoặc truy cập các tệp và thư mục trong một thư mục
  • Giải quyết đường dẫn của một mục trong một thư mục
  • Xóa tệp và thư mục trong một thư mục
  • Xóa một tập tin hoặc thư mục trực tiếp
  • Đổi tên và di chuyển tệp và thư mục
  • Tích hợp kéo và thả
  • Truy cập hệ thống tệp tin gốc
  • Truy cập các tệp được tối ưu hóa cho hiệu suất từ ​​hệ thống tệp riêng ban đầu
• polyfilling
• Bảo mật và quyền
  • Mở tệp hoặc lưu tệp mới
  • Sửa đổi một tập tin hoặc thư mục hiện có
  • minh bạch
  • sự kiên trì của quyền
• Nhận xét
  • Hãy cho chúng tôi biết về thiết kế API
  • Vấn đề với việc thực hiện?
  • Lập kế hoạch sử dụng API?
• Liên kết hữu ích
• Sự nhìn nhận

# API Truy cập Hệ thống Tệp là gì?

API truy cập hệ thống tệp [trước đây gọi là API hệ thống tệp gốc và trước đó được gọi là API tệp có thể ghi] cho phép các nhà phát triển xây dựng các ứng dụng web mạnh mẽ tương tác với các tệp trên thiết bị cục bộ của người dùng, chẳng hạn như IDE, trình chỉnh sửa ảnh và video, . Sau khi người dùng cấp quyền truy cập ứng dụng web, API này cho phép họ đọc hoặc lưu các thay đổi trực tiếp vào các tệp và thư mục trên thiết bị của người dùng. Ngoài việc đọc và ghi tệp, API Truy cập Hệ thống Tệp cung cấp khả năng mở một thư mục và liệt kê nội dung của nó

API Truy cập Hệ thống Tệp—mặc dù có tên tương tự—khác với giao diện

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

2 được hiển thị bởi API Mục nhập Tệp và Thư mục, API ghi lại các loại và hoạt động được trình duyệt cung cấp cho tập lệnh khi hệ thống phân cấp tệp và thư mục được kéo và thả vào

Nó cũng khác với API tệp không dùng nữa. Đặc tả hệ thống và thư mục, xác định API để điều hướng hệ thống phân cấp tệp và phương tiện mà trình duyệt có thể hiển thị các phần hộp cát của hệ thống tệp cục bộ của người dùng cho các ứng dụng web

Nếu bạn đã từng làm việc với việc đọc và ghi tệp trước đây, thì phần lớn những gì tôi sắp chia sẻ sẽ quen thuộc với bạn. Tôi khuyến khích bạn nên đọc nó, bởi vì không phải tất cả các hệ thống đều giống nhau

Chúng tôi đã suy nghĩ rất nhiều về việc thiết kế và triển khai API Truy cập Hệ thống Tệp để đảm bảo rằng mọi người có thể dễ dàng quản lý các tệp của họ. Xem phần bảo mật và quyền để biết thêm thông tin

API truy cập hệ thống tệp hiện được hỗ trợ trên hầu hết các trình duyệt Chromium trên Windows, macOS, ChromeOS và Linux. Một ngoại lệ đáng chú ý là Brave, nơi nó hiện chỉ khả dụng sau một lá cờ. Sắp có hỗ trợ Android cho phần hệ thống tệp riêng tư ban đầu [https. //crbug. com/1354273]. Hiện tại không có kế hoạch nào cho các phương pháp chọn, nhưng bạn có thể theo dõi tiến trình tiềm năng bằng cách gắn dấu sao crbug. com/1011535

# Sử dụng API truy cập hệ thống tệp

Để thể hiện sức mạnh và tính hữu dụng của API Truy cập Hệ thống Tệp, tôi đã viết một trình soạn thảo văn bản tệp duy nhất. Nó cho phép bạn mở một tệp văn bản, chỉnh sửa nó, lưu các thay đổi trở lại đĩa hoặc bắt đầu một tệp mới và lưu các thay đổi vào đĩa. Nó không có gì lạ mắt, nhưng cung cấp đủ để giúp bạn hiểu các khái niệm

# Thử nó

Xem API truy cập hệ thống tệp đang hoạt động trong bản trình diễn trình soạn thảo văn bản

# Đọc tệp từ hệ thống tệp cục bộ

Trường hợp sử dụng đầu tiên tôi muốn giải quyết là yêu cầu người dùng chọn một tệp, sau đó mở và đọc tệp đó từ đĩa

# Yêu cầu người dùng chọn một tập tin để đọc

Điểm vào API truy cập hệ thống tệp là

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

3. Khi được gọi, nó hiển thị hộp thoại chọn tệp và nhắc người dùng chọn tệp. Sau khi họ chọn một tệp, API sẽ trả về một mảng xử lý tệp. Tham số

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

4 tùy chọn cho phép bạn tác động đến hành vi của bộ chọn tệp, ví dụ: bằng cách cho phép người dùng chọn nhiều tệp hoặc thư mục hoặc các loại tệp khác nhau. Không có bất kỳ tùy chọn nào được chỉ định, bộ chọn tệp cho phép người dùng chọn một tệp. Điều này là hoàn hảo cho một trình soạn thảo văn bản

Giống như nhiều API mạnh mẽ khác, việc gọi

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

5 phải được thực hiện trong ngữ cảnh an toàn và phải được gọi từ bên trong cử chỉ của người dùng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  // Destructure the one-element array.
  [fileHandle] = await window.showOpenFilePicker[];
  // Do something with the file handle.
}];

Sau khi người dùng chọn một tệp,

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

5 trả về một mảng các tay cầm, trong trường hợp này là một mảng một phần tử với một

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

7 chứa các thuộc tính và phương thức cần thiết để tương tác với tệp

Sẽ rất hữu ích khi giữ một tham chiếu đến phần xử lý tệp để có thể sử dụng nó sau này. Nó sẽ cần thiết để lưu các thay đổi đối với tệp hoặc để thực hiện bất kỳ thao tác tệp nào khác

# Đọc tệp từ hệ thống tệp

Giờ đây, bạn đã có quyền điều khiển tệp, bạn có thể nhận các thuộc tính của tệp hoặc truy cập chính tệp đó. Hiện tại, tôi sẽ chỉ đọc nội dung của nó. Gọi

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

8 trả về một đối tượng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

9, chứa một đốm màu. Để lấy dữ liệu từ đốm màu, hãy gọi một trong các phương thức của nó, [

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

40,

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

41,

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

42 hoặc

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

43]

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

8

Đối với phần lớn các trường hợp sử dụng, bạn có thể đọc các tệp theo thứ tự tuần tự bằng các phương pháp

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

41,

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

42 hoặc

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

43. Để nhận quyền truy cập ngẫu nhiên vào nội dung của tệp, hãy sử dụng phương pháp

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

40

Đối tượng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

9 được trả về bởi

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

49 chỉ có thể đọc được miễn là tệp bên dưới trên đĩa không thay đổi. Nếu tệp trên đĩa bị sửa đổi, đối tượng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

9 sẽ không thể đọc được và bạn sẽ cần gọi lại

readFile[path, format, callBackFunc]

61 để nhận đối tượng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

9 mới đọc dữ liệu đã thay đổi

# Để tất cả chúng cùng nhau

Khi người dùng nhấp vào nút Mở, trình duyệt sẽ hiển thị bộ chọn tệp. Khi họ đã chọn một tệp, ứng dụng sẽ đọc nội dung và đặt chúng vào một

readFile[path, format, callBackFunc]

63

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

# Ghi tệp vào hệ thống tệp cục bộ

Trong trình soạn thảo văn bản, có hai cách để lưu tệp. Lưu và Lưu dưới dạng. Lưu chỉ cần ghi các thay đổi trở lại tệp gốc bằng cách sử dụng trình điều khiển tệp được truy xuất trước đó. Nhưng Lưu dưới dạng tạo một tệp mới và do đó yêu cầu xử lý tệp mới

# Tạo một tập tin mới

Để lưu tệp, hãy gọi

readFile[path, format, callBackFunc]

64, hiển thị bộ chọn tệp ở chế độ "lưu", cho phép người dùng chọn tệp mới mà họ muốn sử dụng để lưu. Đối với trình soạn thảo văn bản, tôi cũng muốn nó tự động thêm tiện ích mở rộng

readFile[path, format, callBackFunc]

65, vì vậy tôi đã cung cấp thêm một số tham số

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

4

Gotchas

Đôi khi, việc xử lý dữ liệu cần lưu sẽ mất một khoảng thời gian sau khi người dùng nhấp vào nút Lưu trong ứng dụng của bạn. Một vấn đề phổ biến là thực hiện công việc này trước khi mã

readFile[path, format, callBackFunc]

64 chạy, dẫn đến kết quả là

readFile[path, format, callBackFunc]

67. Thay vào đó, hãy lấy phần xử lý tệp trước và chỉ sau khi có phần xử lý tệp mới bắt đầu xử lý dữ liệu

# Lưu các thay đổi vào đĩa

Bạn có thể tìm thấy tất cả mã để lưu thay đổi vào tệp trong bản trình diễn trình soạn thảo văn bản của tôi trên GitHub. Các tương tác hệ thống tệp cốt lõi nằm trong

readFile[path, format, callBackFunc]

68. Ở mức đơn giản nhất, quy trình trông giống như mã bên dưới. Tôi sẽ đi qua từng bước và giải thích nó

readFile[path, format, callBackFunc]

6

Ghi dữ liệu vào đĩa sử dụng đối tượng

readFile[path, format, callBackFunc]

69, một lớp con của

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

80. Tạo luồng bằng cách gọi

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

81 trên đối tượng xử lý tệp. Khi

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

81 được gọi, trước tiên trình duyệt sẽ kiểm tra xem người dùng có cấp quyền ghi vào tệp không. Nếu quyền ghi chưa được cấp, trình duyệt sẽ nhắc người dùng cấp quyền. Nếu không được cấp quyền,

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

81 sẽ ném một

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

84 và ứng dụng sẽ không thể ghi vào tệp. Trong trình soạn thảo văn bản, các đối tượng

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

84 được xử lý theo phương thức

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

86

Phương thức

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

  

87 lấy một chuỗi, đây là thứ cần thiết cho trình soạn thảo văn bản. Nhưng nó cũng có thể lấy BufferSource hoặc Blob. Ví dụ: bạn có thể chuyển một luồng trực tiếp tới nó

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

8

Bạn cũng có thể

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

88 hoặc

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

89 trong luồng để cập nhật tệp tại một vị trí cụ thể hoặc thay đổi kích thước tệp

thận trọng

Các thay đổi không được ghi vào đĩa cho đến khi luồng được đóng, bằng cách gọi

You are reading the content from Tutorials Point

90 hoặc khi luồng được đóng tự động bằng đường ống

# Chỉ định tên tệp được đề xuất và thư mục bắt đầu

Trong nhiều trường hợp, bạn có thể muốn ứng dụng của mình đề xuất tên tệp hoặc vị trí mặc định. Ví dụ: trình soạn thảo văn bản có thể muốn đề xuất tên tệp mặc định là

You are reading the content from Tutorials Point

91 thay vì

You are reading the content from Tutorials Point

92. Bạn có thể đạt được điều này bằng cách chuyển thuộc tính

You are reading the content from Tutorials Point

93 như một phần của tùy chọn

You are reading the content from Tutorials Point

94

You are reading the content from Tutorials Point

9

Điều tương tự cũng xảy ra với thư mục bắt đầu mặc định. Nếu bạn đang xây dựng trình soạn thảo văn bản, bạn có thể muốn bắt đầu hộp thoại lưu tệp hoặc mở tệp trong thư mục

You are reading the content from Tutorials Point

95 mặc định, trong khi đối với trình chỉnh sửa hình ảnh, có thể muốn bắt đầu trong thư mục

You are reading the content from Tutorials Point

96 mặc định. Bạn có thể đề xuất một thư mục bắt đầu mặc định bằng cách chuyển thuộc tính

You are reading the content from Tutorials Point

97 cho các phương thức

You are reading the content from Tutorials Point

94,

You are reading the content from Tutorials Point

99 hoặc

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

00 như vậy

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

0

Danh sách các thư mục hệ thống nổi tiếng là

• let fileHandle;
  butOpenFile.addEventListener['click', async [] => {
    [fileHandle] = await window.showOpenFilePicker[];
    const file = await fileHandle.getFile[];
    const contents = await file.text[];
    textArea.value = contents;
  }];

  01. Thư mục máy tính để bàn của người dùng, nếu một thứ như vậy tồn tại

• You are reading the content from Tutorials Point
  

  95. Thư mục trong đó các tài liệu được tạo bởi người dùng thường được lưu trữ

• let fileHandle;
  butOpenFile.addEventListener['click', async [] => {
    [fileHandle] = await window.showOpenFilePicker[];
    const file = await fileHandle.getFile[];
    const contents = await file.text[];
    textArea.value = contents;
  }];

  03. Thư mục nơi các tệp đã tải xuống thường được lưu trữ

• let fileHandle;
  butOpenFile.addEventListener['click', async [] => {
    [fileHandle] = await window.showOpenFilePicker[];
    const file = await fileHandle.getFile[];
    const contents = await file.text[];
    textArea.value = contents;
  }];

  04. Thư mục nơi các tệp âm thanh thường được lưu trữ

• You are reading the content from Tutorials Point
  

  96. Thư mục thường lưu trữ ảnh và các ảnh tĩnh khác

• let fileHandle;
  butOpenFile.addEventListener['click', async [] => {
    [fileHandle] = await window.showOpenFilePicker[];
    const file = await fileHandle.getFile[];
    const contents = await file.text[];
    textArea.value = contents;
  }];

  06. Thư mục thường lưu trữ video/phim

Ngoài các thư mục hệ thống nổi tiếng, bạn cũng có thể chuyển một tệp hoặc thư mục xử lý hiện có dưới dạng giá trị cho

You are reading the content from Tutorials Point

97. Hộp thoại sau đó sẽ mở trong cùng thư mục

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

9

# Chỉ định mục đích của các bộ chọn tệp khác nhau

Đôi khi các ứng dụng có các bộ chọn khác nhau cho các mục đích khác nhau. Ví dụ: trình soạn thảo văn bản đa dạng thức có thể cho phép người dùng mở tệp văn bản nhưng cũng có thể nhập hình ảnh. Theo mặc định, mỗi bộ chọn tệp sẽ mở ở vị trí được ghi nhớ lần cuối. Bạn có thể tránh điều này bằng cách lưu trữ các giá trị

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

08 cho từng loại bộ chọn. Nếu một

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

08 được chỉ định, thì việc triển khai bộ chọn tệp sẽ ghi nhớ một thư mục được sử dụng lần cuối riêng biệt cho

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

08 đó

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

3

# Lưu trữ xử lý tệp hoặc xử lý thư mục trong IndexedDB

Các trình điều khiển tệp và trình điều khiển thư mục có thể tuần tự hóa, có nghĩa là bạn có thể lưu một trình điều khiển tệp hoặc thư mục vào IndexedDB hoặc gọi

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

91 để gửi chúng giữa cùng một nguồn gốc cấp cao nhất

Lưu tệp hoặc thư mục xử lý vào IndexedDB có nghĩa là bạn có thể lưu trữ trạng thái hoặc ghi nhớ những tệp hoặc thư mục mà người dùng đang làm việc trên đó. Điều này cho phép giữ danh sách các tệp được mở hoặc chỉnh sửa gần đây, đề xuất mở lại tệp cuối cùng khi ứng dụng được mở, khôi phục thư mục làm việc trước đó, v.v. Trong trình soạn thảo văn bản, tôi lưu trữ danh sách năm tệp gần đây nhất mà người dùng đã mở, giúp dễ dàng truy cập lại các tệp đó

Ví dụ mã bên dưới hiển thị lưu trữ và truy xuất một tệp xử lý và một thư mục xử lý. Bạn có thể thấy điều này đang hoạt động trên Glitch. [Tôi sử dụng thư viện idb-keyval cho ngắn gọn. ]

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

80

# Xử lý tệp hoặc thư mục được lưu trữ và quyền

Vì các quyền hiện không được duy trì giữa các phiên, bạn nên xác minh xem người dùng đã cấp quyền cho tệp hoặc thư mục hay chưa bằng cách sử dụng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

92. Nếu họ chưa làm, hãy gọi cho

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

93 để [yêu cầu lại]. Điều này hoạt động tương tự đối với xử lý tệp và thư mục. Bạn cần chạy

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

94 hoặc

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

95 tương ứng

Trong trình soạn thảo văn bản, tôi đã tạo một phương thức

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

96 để kiểm tra xem người dùng đã cấp quyền chưa và nếu được yêu cầu, hãy đưa ra yêu cầu

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

81

Bằng cách yêu cầu quyền ghi với yêu cầu đọc, tôi đã giảm số lượng lời nhắc về quyền;

Mặc dù các đối tượng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

97 có thể được tuần tự hóa và lưu trữ trong IndexedDB, nhưng các quyền hiện cần được cấp lại mỗi lần, điều này không tối ưu. ngôi sao. com/1011533 để được thông báo về công việc duy trì quyền được cấp

# Mở một thư mục và liệt kê nội dung của nó

Để liệt kê tất cả các tệp trong một thư mục, hãy gọi

You are reading the content from Tutorials Point

99. Người dùng chọn một thư mục trong bộ chọn, sau đó một

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

99 được trả về, cho phép bạn liệt kê và truy cập các tệp của thư mục. Theo mặc định, bạn sẽ có quyền đọc đối với các tệp trong thư mục, nhưng nếu bạn cần quyền ghi, bạn có thể chuyển

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

30 vào phương thức

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

82

Ví dụ: nếu bạn cần truy cập từng tệp qua

readFile[path, format, callBackFunc]

61 để lấy các kích thước tệp riêng lẻ, không sử dụng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

32 trên từng kết quả một cách tuần tự mà nên xử lý tất cả các tệp song song, chẳng hạn như qua

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

33

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

83

# Tạo hoặc truy cập tệp và thư mục trong một thư mục

Từ một thư mục, bạn có thể tạo hoặc truy cập các tệp và thư mục bằng cách sử dụng phương thức

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

34 hoặc tương ứng là phương pháp

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

35. Bằng cách chuyển vào một đối tượng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

4 tùy chọn có khóa là

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

37 và giá trị boolean là

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

38 hoặc

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

39, bạn có thể xác định xem có nên tạo một tệp hoặc thư mục mới nếu nó không tồn tại

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

84

# Giải quyết đường dẫn của một mục trong một thư mục

Khi làm việc với các tệp hoặc thư mục trong một thư mục, có thể hữu ích khi giải quyết đường dẫn của mục được đề cập. Điều này có thể được thực hiện với phương pháp có tên thích hợp là

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

800. Để giải quyết, mục có thể là con trực tiếp hoặc gián tiếp của thư mục

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

85

# Xóa các tập tin và thư mục trong một thư mục

Nếu bạn có quyền truy cập vào một thư mục, bạn có thể xóa các tệp và thư mục chứa bằng phương pháp

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

801. Đối với các thư mục, việc xóa có thể được đệ quy tùy chọn và bao gồm tất cả các thư mục con và các tệp chứa trong đó

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

86

# Xóa một tập tin hoặc thư mục trực tiếp

Nếu bạn có quyền truy cập vào phần xử lý tệp hoặc thư mục, hãy gọi cho

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

802 trên số

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

7 hoặc

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

99 để xóa phần đó

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

87

Phương pháp

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

805 hiện đang đứng sau một lá cờ

# Đổi tên và di chuyển tệp và thư mục

Các tệp và thư mục có thể được đổi tên hoặc di chuyển đến một vị trí mới bằng cách gọi

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

806 trên giao diện

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

97.

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

97 có các giao diện con là

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

7 và

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

99. Phương thức

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

806 nhận một hoặc hai tham số. Đầu tiên có thể là một chuỗi có tên mới hoặc một

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

99 cho thư mục đích. Trong trường hợp sau, tham số thứ hai tùy chọn là một chuỗi có tên mới, vì vậy việc di chuyển và đổi tên có thể diễn ra trong một bước

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

88

Phương pháp

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

813 đã được gửi cho các tệp trong hệ thống tệp riêng tư ban đầu [OPFS], nằm sau cờ cho các tệp nếu nguồn hoặc đích nằm ngoài OPFS và chưa được hỗ trợ cho các thư mục

# Tích hợp kéo và thả

Giao diện Kéo và Thả HTML cho phép các ứng dụng web chấp nhận các tệp được kéo và thả trên một trang web. Trong quá trình kéo và thả, các mục tệp và thư mục được kéo được liên kết với các mục nhập tệp và mục nhập thư mục tương ứng. Phương thức

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

814 trả về một lời hứa với một đối tượng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

7 nếu mục được kéo là một tệp và một lời hứa với một đối tượng

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

99 nếu mục được kéo là một thư mục. Danh sách dưới đây cho thấy điều này trong hành động. Lưu ý rằng

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

817 của giao diện Kéo và Thả là

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

818 cho cả tệp và thư mục, trong khi

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

819 của API Truy cập Hệ thống Tệp là

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

818 cho tệp và

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

821 cho thư mục

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

89

# Truy cập hệ thống tệp riêng gốc

Hệ thống tệp riêng tư ban đầu là một điểm cuối lưu trữ, như tên cho thấy, là riêng tư đối với nguồn gốc của trang. Mặc dù các trình duyệt thường triển khai điều này bằng cách lưu giữ nội dung của hệ thống tệp riêng tư ban đầu này vào đĩa ở đâu đó, nhưng nội dung đó không có ý định để người dùng dễ dàng truy cập. Tương tự, không có kỳ vọng rằng các tệp hoặc thư mục có tên khớp với tên của các phần tử con của hệ thống tệp riêng ban đầu tồn tại. Mặc dù trình duyệt có thể làm cho có vẻ như có tệp, nhưng bên trong—vì đây là hệ thống tệp gốc riêng tư—trình duyệt có thể lưu trữ các "tệp" này trong cơ sở dữ liệu hoặc bất kỳ cấu trúc dữ liệu nào khác. Về cơ bản, nếu bạn sử dụng API này, đừng hy vọng tìm thấy các tệp đã tạo khớp với nhau ở đâu đó trên đĩa cứng. Bạn có thể thao tác như bình thường trên hệ thống tệp riêng tư ban đầu khi bạn có quyền truy cập vào thư mục gốc

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

99

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

0

# Truy cập các tệp được tối ưu hóa cho hiệu suất từ ​​hệ thống tệp riêng ban đầu

Hệ thống tệp tin gốc cung cấp quyền truy cập tùy chọn vào một loại tệp đặc biệt được tối ưu hóa cao cho hiệu suất, ví dụ: bằng cách cung cấp quyền truy cập ghi tại chỗ và độc quyền vào nội dung của tệp. Trong Chromium 102 trở lên, có một phương thức bổ sung trên hệ thống tệp riêng tư ban đầu để đơn giản hóa quyền truy cập vào tệp.

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

823 [đối với hoạt động đọc và ghi đồng bộ]. Nó được hiển thị trên

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

7, nhưng độc quyền trong Web Worker

let fileHandle;
butOpenFile.addEventListener['click', async [] => {
  [fileHandle] = await window.showOpenFilePicker[];
  const file = await fileHandle.getFile[];
  const contents = await file.text[];
  textArea.value = contents;
}];

1

Những người quan tâm đến phương pháp

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

825 [nghĩa là biến thể không đồng bộ có sẵn trên luồng chính và trong Công nhân web] nên theo dõi crbug. com/1323922

# Polyfilling

Không thể điền đầy đủ các phương thức API Truy cập Hệ thống Tệp

• Phương pháp

  let fileHandle;
  butOpenFile.addEventListener['click', async [] => {
    [fileHandle] = await window.showOpenFilePicker[];
    const file = await fileHandle.getFile[];
    const contents = await file.text[];
    textArea.value = contents;
  }];

  5 có thể xấp xỉ với phần tử

  const fs = require['fs']
  let fInput = "You are reading the content from Tutorials Point"
  fs.writeFile['tp.txt', fInput, [err] => {
     if [err] throw err;
     else{
        console.log["The file is updated with the given data"]
     }
  }]
  

  827
• Phương pháp

  readFile[path, format, callBackFunc]
  

  64 có thể được mô phỏng bằng phần tử

  const fs = require['fs']
  let fInput = "You are reading the content from Tutorials Point"
  fs.writeFile['tp.txt', fInput, [err] => {
     if [err] throw err;
     else{
        console.log["The file is updated with the given data"]
     }
  }]
  

  829, mặc dù điều này kích hoạt tải xuống theo chương trình và không cho phép ghi đè lên các tệp hiện có
• Phương pháp

  You are reading the content from Tutorials Point
  

  99 có thể được mô phỏng phần nào với phần tử

  const fs = require['fs']
  let fInput = "You are reading the content from Tutorials Point"
  fs.writeFile['tp.txt', fInput, [err] => {
     if [err] throw err;
     else{
        console.log["The file is updated with the given data"]
     }
  }]
  

  831 không chuẩn

Chúng tôi đã phát triển một thư viện có tên là browser-fs-access sử dụng API Truy cập Hệ thống Tệp bất cứ khi nào có thể và điều đó sẽ quay trở lại các tùy chọn tốt nhất tiếp theo này trong tất cả các trường hợp khác

# Bảo mật và quyền

Nhóm Chrome đã thiết kế và triển khai API truy cập hệ thống tệp bằng cách sử dụng các nguyên tắc cốt lõi được xác định trong Kiểm soát quyền truy cập vào các tính năng nền tảng web mạnh mẽ, bao gồm kiểm soát người dùng và tính minh bạch cũng như công thái học của người dùng

# Mở tệp hoặc lưu tệp mới

Bộ chọn tệp được sử dụng để mở tệp hiện có để đọc

Khi mở tệp, người dùng cung cấp quyền đọc tệp hoặc thư mục thông qua bộ chọn tệp. Bộ chọn tệp đang mở chỉ có thể được hiển thị qua cử chỉ của người dùng khi được cung cấp từ ngữ cảnh an toàn. Nếu người dùng đổi ý, họ có thể hủy lựa chọn trong bộ chọn tệp và trang web không có quyền truy cập vào bất cứ thứ gì. Đây là hành vi tương tự như hành vi của phần tử

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

827

Bộ chọn tệp được sử dụng để lưu tệp vào đĩa

Tương tự, khi ứng dụng web muốn lưu tệp mới, trình duyệt sẽ hiển thị bộ chọn tệp lưu, cho phép người dùng chỉ định tên và vị trí của tệp mới. Vì họ đang lưu tệp mới vào thiết bị [thay vì ghi đè lên tệp hiện có], bộ chọn tệp sẽ cấp cho ứng dụng quyền ghi vào tệp

# Thư mục bị hạn chế

Để giúp bảo vệ người dùng và dữ liệu của họ, trình duyệt có thể giới hạn khả năng người dùng lưu vào một số thư mục nhất định, ví dụ: các thư mục hệ điều hành chính như Windows, thư mục Thư viện macOS, v.v. Khi điều này xảy ra, trình duyệt sẽ hiển thị lời nhắc phương thức và yêu cầu người dùng chọn một thư mục khác

# Sửa đổi một tập tin hoặc thư mục hiện có

Ứng dụng web không thể sửa đổi tệp trên đĩa mà không nhận được sự cho phép rõ ràng từ người dùng

# Lời nhắc cấp phép

Nếu một người muốn lưu các thay đổi đối với một tệp mà trước đó họ đã cấp quyền truy cập đọc, trình duyệt sẽ hiển thị lời nhắc cấp quyền theo phương thức, yêu cầu quyền cho trang web ghi các thay đổi vào đĩa. Yêu cầu quyền chỉ có thể được kích hoạt bằng cử chỉ của người dùng, chẳng hạn như bằng cách nhấp vào nút Lưu

Lời nhắc được hiển thị cho người dùng trước khi trình duyệt được cấp quyền ghi trên một tệp hiện có

Ngoài ra, một ứng dụng web chỉnh sửa nhiều tệp, chẳng hạn như IDE, cũng có thể yêu cầu quyền lưu các thay đổi tại thời điểm mở

Nếu người dùng chọn Hủy và không cấp quyền ghi, thì ứng dụng web không thể lưu các thay đổi vào tệp cục bộ. Nó sẽ cung cấp một phương pháp thay thế để người dùng lưu dữ liệu của họ, chẳng hạn bằng cách cung cấp cách "tải xuống" tệp, lưu dữ liệu vào đám mây, v.v.

# minh bạch

Biểu tượng thanh địa chỉ cho biết người dùng đã cấp cho trang web quyền lưu vào tệp cục bộ

Sau khi người dùng đã cấp quyền cho ứng dụng web lưu tệp cục bộ, trình duyệt sẽ hiển thị một biểu tượng trong thanh URL. Nhấp vào biểu tượng sẽ mở ra cửa sổ bật lên hiển thị danh sách các tệp mà người dùng đã cấp quyền truy cập. Người dùng có thể dễ dàng thu hồi quyền truy cập đó nếu họ chọn

# kiên trì cấp phép

Ứng dụng web có thể tiếp tục lưu các thay đổi đối với tệp mà không cần nhắc cho đến khi đóng tất cả các tab cho nguồn gốc của nó. Khi một tab được đóng, trang web sẽ mất tất cả quyền truy cập. Lần tới khi người dùng sử dụng ứng dụng web, họ sẽ được nhắc lại để truy cập vào các tệp

# Nhận xét

Chúng tôi muốn nghe về trải nghiệm của bạn với API Truy cập Hệ thống Tệp

# Hãy cho chúng tôi biết về thiết kế API

Có điều gì đó về API không hoạt động như bạn mong đợi không?

• Gửi một vấn đề cụ thể trên repo GitHub Truy cập hệ thống tệp WICG hoặc thêm suy nghĩ của bạn vào một vấn đề hiện có

# Vấn đề với việc thực hiện?

Bạn có tìm thấy lỗi trong quá trình triển khai của Chrome không?

• Gửi lỗi tại https. //Mới. con sâu bọ. com. Đảm bảo bao gồm càng nhiều chi tiết càng tốt, hướng dẫn đơn giản để sao chép và đặt Thành phần thành

  const fs = require['fs']
  let fInput = "You are reading the content from Tutorials Point"
  fs.writeFile['tp.txt', fInput, [err] => {
     if [err] throw err;
     else{
        console.log["The file is updated with the given data"]
     }
  }]
  

  833. Trục trặc hoạt động tuyệt vời để chia sẻ nhanh chóng và dễ dàng

# Lập kế hoạch sử dụng API?

Lập kế hoạch sử dụng API truy cập hệ thống tệp trên trang web của bạn?

JavaScript có thể ghi vào đĩa không?

JavaScript có thể lưu tệp không?

JavaScript có thể đọc và ghi các tệp cục bộ không?

Làm cách nào chúng tôi có thể đọc và ghi tệp bằng JavaScript?