LocalStorage khác với indexedDB như thế nào?

localStorage và indexedDB được sử dụng để lưu trữ dữ liệu ngoại tuyến trong HTML5. Sự khác biệt chính của họ là gì và cái nào thích hợp hơn trong những tình huống nào?

Nhìn bề ngoài, hai công nghệ có thể có thể so sánh trực tiếp với nhau, tuy nhiên nếu bạn dành thời gian cho chúng, bạn sẽ sớm nhận ra chúng không như vậy. Chúng được thiết kế để đạt được mục tiêu tương tự, lưu trữ phía máy khách, nhưng chúng tiếp cận nhiệm vụ trong tầm tay từ các quan điểm khác nhau đáng kể và hoạt động tốt nhất với lượng dữ liệu khác nhau.

localStorage, hay chính xác hơn là Web Storage , được thiết kế cho lượng dữ liệu nhỏ hơn. Về cơ bản, đây chỉ là một chuỗi lưu trữ khóa - giá trị , với API đồng bộ đơn giản . Đó là phần cuối cùng là chìa khóa. Mặc dù không có gì trong đặc tả cấm Lưu trữ DOM không đồng bộ, nhưng hiện tại tất cả các triển khai đều đồng bộ (nghĩa là chặn các yêu cầu). Ngay cả khi bạn không bận tâm đến việc sử dụng khóa lưu trữ giá trị ngây thơ cho lượng dữ liệu lớn hơn, khách hàng của bạn vẫn sẽ chờ đợi ứng dụng của bạn tải mãi mãi.

mặt khác , indexedDB được thiết kế để hoạt động với lượng dữ liệu lớn hơn đáng kể. Đầu tiên, về mặt lý thuyết, nó cung cấp cả API đồng bộ và API không đồng bộ. Tuy nhiên, trên thực tế, tất cả các triển khai hiện tại đều không đồng bộ và các yêu cầu sẽ không chặn giao diện người dùng tải. Ngoài ra, indexedDB, như tên cho thấy, cung cấp các chỉ mục . Bạn có thể chạy các truy vấn thô sơ trên cơ sở dữ liệu của mình và tìm nạp các bản ghi bằng cách tra cứu các khóa của chúng trong các phạm vi khóa cụ thể . indexedDB cũng hỗ trợ các giao dịch và cung cấp các loại đơn giản (ví dụ: Ngày).

Tại thời điểm này, indexedDB có vẻ là giải pháp ưu việt cho mọi tình huống. Tuy nhiên, có một hình phạt cho tất cả các tính năng của nó: So với DOM Storage, API của nó khá phức tạp. indexedDB giả định sự quen thuộc chung với các khái niệm cơ sở dữ liệu, trong khi với Web Storage, bạn có thể nhảy ngay vào. Nếu bạn đã từng làm việc với cookie, bạn sẽ không gặp vấn đề gì khi làm việc với Web Storage. Ngoài ra, nói chung, bạn sẽ cần viết thêm mã trong indexedDB để đạt được kết quả chính xác như trong Lưu trữ Web (và nhiều mã hơn = nhiều lỗi hơn). Hơn nữa, việc mô phỏng Lưu trữ Web cho các trình duyệt không hỗ trợ nó tương đối đơn giản. Với indexedDB, tác vụ sẽ không có giá trị thời gian của nó. Cuối cùng, trước khi bạn đi sâu vào indexedDB, trước tiên bạn nên xem API Quota .

Vào cuối ngày, điều đó hoàn toàn phụ thuộc vào bạn nếu bạn sử dụng Web Storage hoặc indexedDB, hoặc cả hai, trong ứng dụng của bạn. Trường hợp sử dụng tốt cho Lưu trữ web sẽ là lưu trữ dữ liệu phiên đơn giản, ví dụ như tên người dùng và lưu cho bạn một số yêu cầu vào cơ sở dữ liệu thực tế của bạn. Mặt khác, các tính năng bổ sung của indexedDB có thể giúp bạn lưu trữ tất cả dữ liệu bạn cần để ứng dụng của bạn hoạt động ngoại tuyến.

@yannis trả lời là tuyệt vời. Chỉ muốn thêm một vài điều.

1. Trong một số trường hợp, như Công nhân dịch vụ, bạn không thể sử dụng mã chặn, do đó, bạn không thể sử dụng localStorage và phải sử dụng một cái gì đó như indexedDB.

2. API cho indexedDB rất phức tạp và tẻ nhạt (Tôi sẽ đi xa hơn để nói "khủng khiếp", YMMV). Có một số "wrapper" thư viện để đơn giản hóa các API, tôi mạnh mẽ đề nghị bạn nên nhìn vào những.

Đối với tôi, tôi thấy rằng tôi có thể lưu trữ các đốm màu trong IndexedDB trong khi trong localStorage tôi chỉ có thể lưu trữ các chuỗi. Điều đó có nghĩa là IndexdDB tốt hơn cho dữ liệu nhị phân như hình ảnh, âm thanh, video. Có, chúng tôi có thể lưu trữ hình ảnh trong base64 trong localStorage, nhưng các đốm màu sẽ nhỏ hơn và nhanh hơn vì chúng tôi không cần giải mã chúng.

Trích dẫn từ MDN :

The keys and the values are always strings.

Về IndexedDB :

Any objects supported by the structured clone algorithm can be stored:  
All primitive types However not symbols
Boolean object   
String object    
Date     
RegExp  The lastIndex field is not preserved.
Blob     
File     
FileList     
ArrayBuffer  
ArrayBufferView This basically means all typed arrays like Int32Array etc.
ImageData    
Array    
Object  This just includes plain objects (e.g. from object literals)
Map  
Set