API truy cập hệ thống tệp của Chromium [được giới thiệu vào năm 2019]
Có một API truy cập hệ thống tệp tương đối mới, không chuẩn [không bị nhầm lẫn với API tệp và thư mục trước đó hoặc API hệ thống tệp]. Có vẻ như nó đã được giới thiệu vào năm 2019/2020 trong Chromium/Chrome và không có sự hỗ trợ trong Firefox hoặc Safari.
Khi sử dụng API này, một trang được mở cục bộ có thể mở/lưu các tệp cục bộ khác và sử dụng dữ liệu của các tệp trong trang. Nó yêu cầu sự cho phép ban đầu để lưu, nhưng trong khi người dùng ở trên trang, các lần lưu các tệp cụ thể tiếp theo sẽ làm như vậy 'âm thầm'. Người dùng cũng có thể cấp quyền cho một thư mục cụ thể, trong đó các lần đọc và ghi vào thư mục đó không yêu cầu phê duyệt. Sự chấp thuận là cần thiết một lần nữa sau khi người dùng đóng tất cả các tab vào trang web và mở lại trang.
Bạn có thể đọc thêm về API mới này tại //web.dev/file-system-access/. Nó có nghĩa là được sử dụng để tạo ra các ứng dụng web mạnh mẽ hơn.
Một vài điều cần lưu ý về nó:
Theo mặc định, nó đòi hỏi một bối cảnh an toàn để chạy. Chạy nó trên https, localhost hoặc thông qua tệp: // nên hoạt động.
Bạn có thể nhận được một tay cầm tệp từ việc kéo và thả một tệp bằng cách sử dụng datatransferitem
.getAsFileSystemHandleBan đầu đọc hoặc lưu tệp yêu cầu sự chấp thuận của người dùng và chỉ có thể được bắt đầu thông qua tương tác của người dùng. Sau đó, các lần đọc và lưu tiếp theo không cần sự chấp thuận, cho đến khi trang web được mở lại.
Có thể lưu các tệp vào các tệp trong trang [vì vậy nếu bạn đang chỉnh sửa 'đường dẫn/to/file.html' và tải lại trang, nó sẽ có thể có một tham chiếu đến tệp]. Chúng dường như không thể được xâu chuỗi, vì vậy được lưu trữ thông qua một cái gì đó như IndexedDB [xem câu trả lời này để biết thêm thông tin]. Sử dụng tay cầm được lưu trữ để đọc/ghi đòi hỏi sự tương tác của người dùng và sự chấp thuận của người dùng.
Dưới đây là một số ví dụ đơn giản. Họ dường như không chạy trong một iframe từ miền chéo, vì vậy bạn có thể cần lưu chúng dưới dạng tệp HTML và mở chúng bằng Chrome/Chromium.
Mở và lưu, với kéo và thả [không có thư viện bên ngoài]:
OpenSave
let openButton = document.getElementById['open'];
let saveButton = document.getElementById['save'];
let editor = document.getElementById['editor'];
let fileHandle;
async function openFile[] {
try {
[fileHandle] = await window.showOpenFilePicker[];
await restoreFromFile[fileHandle];
} catch [e] {
// might be user canceled
}
}
async function restoreFromFile[] {
let file = await fileHandle.getFile[];
let text = await file.text[];
editor.value = text;
}
async function saveFile[] {
var saveValue = editor.value;
if [!fileHandle] {
try {
fileHandle = await window.showSaveFilePicker[];
} catch [e] {
// might be user canceled
}
}
if [!fileHandle || !await verifyPermissions[fileHandle]] {
return;
}
let writableStream = await fileHandle.createWritable[];
await writableStream.write[saveValue];
await writableStream.close[];
}
async function verifyPermissions[handle] {
if [await handle.queryPermission[{ mode: 'readwrite' }] === 'granted'] {
return true;
}
if [await handle.requestPermission[{ mode: 'readwrite' }] === 'granted'] {
return true;
}
return false;
}
document.body.addEventListener['dragover', function [e] {
e.preventDefault[];
}];
document.body.addEventListener['drop', async function [e] {
e.preventDefault[];
for [const item of e.dataTransfer.items] {
if [item.kind === 'file'] {
let entry = await item.getAsFileSystemHandle[];
if [entry.kind === 'file'] {
fileHandle = entry;
restoreFromFile[];
} else if [entry.kind === 'directory'] {
// handle directory
}
}
}
}];
openButton.addEventListener['click', openFile];
saveButton.addEventListener['click', saveFile];
Lưu trữ và truy xuất một tay cầm tệp bằng IDB-KeyVal:
Lưu trữ xử lý tệp có thể khó khăn, vì chúng không thể không được xác định, mặc dù rõ ràng chúng có thể được sử dụng với IndexEdDB và chủ yếu là với history.state. Ví dụ này, chúng tôi sẽ sử dụng IDB-KeyVal để truy cập IndexEdDB để lưu trữ xử lý tệp. Để xem nó hoạt động, mở hoặc lưu một tệp, sau đó tải lại trang và nhấn nút 'Khôi phục'. Ví dụ này sử dụng một số mã từ //stackoverflow.com/a/65938910/.
RestoreOpenSave
let restoreButton = document.getElementById['restore'];
let openButton = document.getElementById['open'];
let saveButton = document.getElementById['save'];
let editor = document.getElementById['editor'];
let fileHandle;
async function openFile[] {
try {
[fileHandle] = await window.showOpenFilePicker[];
await restoreFromFile[fileHandle];
} catch [e] {
// might be user canceled
}
}
async function restoreFromFile[] {
let file = await fileHandle.getFile[];
let text = await file.text[];
await idbKeyval.set['file', fileHandle];
editor.value = text;
restoreButton.style.display = 'none';
}
async function saveFile[] {
var saveValue = editor.value;
if [!fileHandle] {
try {
fileHandle = await window.showSaveFilePicker[];
await idbKeyval.set['file', fileHandle];
} catch [e] {
// might be user canceled
}
}
if [!fileHandle || !await verifyPermissions[fileHandle]] {
return;
}
let writableStream = await fileHandle.createWritable[];
await writableStream.write[saveValue];
await writableStream.close[];
restoreButton.style.display = 'none';
}
async function verifyPermissions[handle] {
if [await handle.queryPermission[{ mode: 'readwrite' }] === 'granted'] {
return true;
}
if [await handle.requestPermission[{ mode: 'readwrite' }] === 'granted'] {
return true;
}
return false;
}
async function init[] {
var previousFileHandle = await idbKeyval.get['file'];
if [previousFileHandle] {
restoreButton.style.display = 'inline-block';
restoreButton.addEventListener['click', async function [e] {
if [await verifyPermissions[previousFileHandle]] {
fileHandle = previousFileHandle;
await restoreFromFile[];
}
}];
}
document.body.addEventListener['dragover', function [e] {
e.preventDefault[];
}];
document.body.addEventListener['drop', async function [e] {
e.preventDefault[];
for [const item of e.dataTransfer.items] {
console.log[item];
if [item.kind === 'file'] {
let entry = await item.getAsFileSystemHandle[];
if [entry.kind === 'file'] {
fileHandle = entry;
restoreFromFile[];
} else if [entry.kind === 'directory'] {
// handle directory
}
}
}
}];
openButton.addEventListener['click', openFile];
saveButton.addEventListener['click', saveFile];
}
init[];
Ghi chú bổ sung
Hỗ trợ Firefox và Safari dường như không thể xảy ra, ít nhất là trong thời gian tới. Xem //github.com/mozilla/standards-poseitions/issues/154 và //lists.webkit.org/pipermail/webkit-dev/2020-august/031362.html