IndexedDB khác với lưu trữ cục bộ HTML5 về mặt khái niệm như thế nào?

1. Cả indexedDB và local storage đều là các kho lưu trữ giá trị quan trọng. Lợi thế của việc có hai cửa hàng chính / giá trị là gì?
2. indexedDB là không đồng bộ, nhưng các phép tham gia (điều tốn thời gian nhất) là thủ công. Chúng dường như chạy trong cùng một chuỗi khi các lệnh gọi không đồng bộ được thực hiện. Làm thế nào điều này sẽ không chặn giao diện người dùng?
3. indexedDB cho phép một cửa hàng lớn hơn. Tại sao không tăng kích thước của cửa hàng HTML5?
4. Tôi đang gãi đầu. Điểm của indexedDB là gì?

IndexedDB không phải là nơi lưu trữ khóa-giá trị theo cách giống như Local Storage. Bộ nhớ cục bộ chỉ lưu trữ các chuỗi, vì vậy, để đặt một đối tượng vào bộ nhớ cục bộ, cách tiếp cận thông thường là JSON.stringify nó:

myObject = {a: 1, b: 2, c: 3};
localStorage.setItem("uniq", JSON.stringify(myObject));

Điều này là tốt cho việc tìm kiếm đối tượng có khóa uniq, nhưng cách duy nhất để lấy lại các thuộc tính của myObject khỏi bộ nhớ cục bộ là JSON. Phân tích đối tượng và kiểm tra nó:

var myStorageObject = JSON.parse(localStorage.getItem("uniq"));
window.alert(myStorageObject.b);

Điều này là tốt nếu bạn chỉ có một hoặc một vài đối tượng trong bộ nhớ cục bộ. Nhưng hãy tưởng tượng bạn có một nghìn đối tượng, tất cả đều có thuộc tính bvà bạn muốn làm điều gì đó chỉ với những đối tượng đó ở đâu b==2. Với bộ nhớ cục bộ, bạn sẽ phải xem qua toàn bộ cửa hàng và kiểm tra btừng mặt hàng, việc xử lý này rất lãng phí.

Với IndexedDB, bạn có thể lưu trữ những thứ khác ngoài chuỗi trong giá trị : "Điều này bao gồm các loại đơn giản như DOMString và Date cũng như các thể hiện Đối tượng và Mảng." Không chỉ vậy, bạn có thể tạo chỉ mục trên thuộc tính của các đối tượng mà bạn đã lưu trữ trong giá trị. Vì vậy, với IndexedDb, bạn có thể đặt cùng một nghìn đối tượng đó nhưng tạo một chỉ mục trên thuộc btính và sử dụng chỉ mục đó để chỉ truy xuất các đối tượng mà b==2không cần quét mọi đối tượng trong cửa hàng.

Ít nhất đó là ý tưởng. API IndexedDB không trực quan lắm.

Chúng dường như chạy trong cùng một chuỗi khi các lệnh gọi không đồng bộ được thực hiện. Làm thế nào điều này sẽ không chặn giao diện người dùng?

Không đồng bộ không giống với đa luồng, JavaScript, theo quy tắc, không phải là đa luồng . Bất kỳ xử lý nặng nào bạn thực hiện trong JS sẽ chặn giao diện người dùng, nếu bạn muốn giảm thiểu việc chặn giao diện người dùng, hãy thử Web worker .

indexedDB cho phép một cửa hàng lớn hơn. Tại sao không tăng kích thước của cửa hàng HTML5?

Bởi vì, nếu không lập chỉ mục thích hợp, nó sẽ ngày càng chậm hơn khi lớn hơn.

Tôi đã xem qua bài viết hay này thảo luận về localstorage so với indexeddb và các tùy chọn khả thi khác.

(tất cả các giá trị dưới đây tính bằng mili giây)

https://nolanlawson.com/2015/09/29/indexeddb-websql-localstorage-what-blocks-the-dom/

Tóm tắt từ bài báo (hoàn toàn là quan điểm của tác giả),

1. Trong cả ba Chrome, Firefox và Edge, LocalStorage chặn hoàn toàn DOM trong khi bạn đang ghi dữ liệu 2. Việc chặn này đáng chú ý hơn nhiều so với trong bộ nhớ, vì trình duyệt phải thực sự chuyển sang đĩa.
2. Không có gì đáng ngạc nhiên, vì bất kỳ mã đồng bộ nào đang bị chặn, các hoạt động trong bộ nhớ cũng bị chặn. DOM chặn trong quá trình chèn lâu dài, nhưng trừ khi bạn đang xử lý nhiều dữ liệu, bạn sẽ không nhận thấy, vì các hoạt động trong bộ nhớ thực sự nhanh.

3. Trong cả Firefox và Chrome, IndexedDB chậm hơn LocalStorage đối với việc chèn khóa-giá trị cơ bản và nó vẫn chặn DOM. Trong Chrome, nó cũng chậm hơn WebSQL, ngăn chặn DOM, nhưng gần như không nhiều. Chỉ trong Edge và Safari, IndexedDB mới có thể chạy ở chế độ nền mà không làm gián đoạn giao diện người dùng và nghiêm trọng hơn, đó là hai trình duyệt chỉ triển khai một phần thông số IndexedDB.

4. IndexedDB hoạt động tốt trong web worker, nơi nó chạy với tốc độ gần như tương đương nhưng không chặn DOM. Ngoại lệ duy nhất là Safari, không hỗ trợ IndexedDB bên trong worker, nhưng nó vẫn không chặn giao diện người dùng.

5. localmemory là lý tưởng nếu dữ liệu đơn giản và tối thiểu

Thêm vào trình anwser của robertc, indexedDB biết 'phạm vi' để bạn có thể tìm kiếm và truy xuất tất cả các bản ghi bắt đầu bằng 'ab' và kết thúc bằng Abd 'để tìm' abc ', v.v.

Chạy phần sau trong bảng điều khiển của trình duyệt. Nó sẽ tạo một thực thể riêng biệt trong Application> Storage cùng với LocalStorage và SessionStorage

const request = indexedDB.open("notes");
request.onupgradeneeded = e => {
  alert("upgrade");
}
request.onsuccess = e => {
  alert("success");
}
request.onerror = e => {
  alert("error");
}

Bạn có thể truy vấn Bộ nhớ này với tất cả các hoạt động CRUD không giống như hai bộ lưu trữ khác có ít tính linh hoạt hơn và các chức năng để chơi cùng.