Hướng dẫn how to save data in html javascript - cách lưu dữ liệu trong html javascript

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 https://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.getAsFileSystemHandle

  • Ban đầ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.

    Hướng dẫn how to save data in html javascript - cách lưu dữ liệu trong html javascript

  • 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):


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ừ https://stackoverflow.com/a/65938910/.



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 https://github.com/mozilla/standards-poseitions/issues/154 và https://lists.webkit.org/pipermail/webkit-dev/2020-august/031362.html

Làm cách nào để lưu dữ liệu HTML?

HTML Web Storage cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách: window.localstorage - Lưu trữ dữ liệu không có ngày hết hạn. window.SessionStorage - Lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi tab Trình duyệt được đóng)window.localStorage - stores data with no expiration date. window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

Làm cách nào để lưu dữ liệu JavaScript?

Lưu trữ dữ liệu trong trình duyệt với JavaScript..
setItem (khóa, giá trị) Lưu trữ khóa/giá trị ..
getItem (khóa) nhận được giá trị theo khóa ..
RemoveItem (khóa) Xóa khóa và giá trị ..
Rõ ràng () Xóa mọi thứ khỏi lưu trữ ..
khóa (chỉ mục) Nhận khóa từ một vị trí nhất định ..
Chiều dài số lượng các mặt hàng được lưu trữ ..

Làm cách nào để lưu JavaScript trong HTML?

Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ tập lệnh với thuộc tính SRC.Bạn đã sử dụng thuộc tính SRC khi sử dụng hình ảnh.Giá trị cho thuộc tính SRC phải là đường dẫn đến tệp JavaScript của bạn.Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn.use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the tags in your HTML document.

Save () làm gì trong JavaScript?

Save () làm gì trong JavaScript?Phương thức Save () của API khung hình 2D để lưu toàn bộ trạng thái của khung vẽ bằng cách đẩy trạng thái hiện tại lên một ngăn xếp.saves the entire state of the canvas by pushing the current state onto a stack.