Hướng dẫn nhanh nhưng đầy đủ về IndexedDB và lưu trữ dữ liệu trong trình duyệt

Quan tâm đến việc học JavaScript? Nhận ebook miễn phí của tôi tại jshandbook.com

IndexedDB là một trong những khả năng lưu trữ được đưa vào trình duyệt trong nhiều năm qua. Nó có một kho lưu trữ khóa / giá trị (cơ sở dữ liệu noQuery) được coi là giải pháp dứt khoát để lưu trữ dữ liệu trong trình duyệt.

IndexedDB là một API không đồng bộ, có nghĩa là việc thực hiện các hoạt động tốn kém đã giành được khối chặn giao diện người dùng cung cấp trải nghiệm cẩu thả cho người dùng.

Nó có thể lưu trữ một lượng dữ liệu không xác định, mặc dù một khi vượt qua một ngưỡng nhất định, người dùng sẽ được nhắc đưa ra trang web giới hạn cao hơn.

Nó hỗ trợ trên tất cả các trình duyệt hiện đại.

Nó hỗ trợ các giao dịch và phiên bản, và cho hiệu suất tốt.

Bên trong trình duyệt chúng ta cũng có thể sử dụng:

  • Cookies, có thể lưu trữ một chuỗi rất nhỏ
  • DOM Storage (hoặc Web Storage), một thuật ngữ thường xác định localStorage và sessionStorage, hai kho lưu trữ khóa / giá trị. sessionStorage, không lưu giữ dữ liệu, sẽ bị xóa khi phiên kết thúc, trong khi localStorage giữ dữ liệu qua các phiên

Lưu trữ cục bộ / phiên có nhược điểm là bị giới hạn ở kích thước nhỏ (và không nhất quán), với các trình duyệt triển khai cung cấp từ 2MB đến 10 MB cho mỗi trang web.

Trước đây chúng ta cũng có Web SQL, một trình bao bọc xung quanh SQLite. Nhưng điều này hiện không được chấp nhận và không được hỗ trợ trên một số trình duyệt hiện đại. Nó không bao giờ là một tiêu chuẩn được công nhận và vì vậy nó không nên được sử dụng - mặc dù 83% người dùng có công nghệ này trên thiết bị của họ theo Can I Use.

Mặc dù về mặt kỹ thuật bạn có thể tạo nhiều cơ sở dữ liệu trên mỗi trang web, bạn thường tạo một cơ sở dữ liệu duy nhất. Trong cơ sở dữ liệu đó, bạn có thể tạo nhiều cửa hàng đối tượng.

Cơ sở dữ liệu là riêng tư đối với một tên miền, vì vậy bất kỳ trang web nào khác cũng không thể truy cập vào một trang web khác Cửa hàng Index IndexedDB.

Mỗi cửa hàng thường chứa một tập hợp các thứ, có thể là:

  • dây
  • số
  • các đối tượng
  • mảng
  • ngày

Ví dụ: bạn có thể có một cửa hàng chứa các bài đăng và một cửa hàng khác chứa các bình luận.

Cửa hàng chứa một số mặt hàng có một khóa duy nhất, đại diện cho cách xác định đối tượng.

Bạn có thể thay đổi các cửa hàng đó bằng cách sử dụng các giao dịch, bằng cách thực hiện các thao tác thêm, chỉnh sửa và xóa và bằng cách lặp lại các mục mà chúng chứa.

Do sự ra đời của Promise trong ES2015 và việc chuyển API tiếp theo sang sử dụng lời hứa, API IndexedDB có vẻ hơi cũ.

Mặc dù không có gì sai với nó, nhưng trong tất cả các ví dụ mà tôi giải thích, tôi sẽ sử dụng Thư viện được hứa hẹn IndexedDB của Jake Archibald, đây là một lớp nhỏ trên API IndexedDB để dễ sử dụng hơn.

Thư viện này cũng được sử dụng trên tất cả các ví dụ trên trang web Google Developers liên quan đến IndexedDB.

Tạo cơ sở dữ liệu IndexedDB

Bao gồm lib idb bằng cách sử dụng:

sợi thêm idb

Và sau đó đưa nó vào trang của bạn, bằng cách sử dụng Webpack hoặc Browserify hoặc bất kỳ hệ thống xây dựng nào khác, hoặc đơn giản là: