Apa perbedaan localStorage dari indexedDB?

localStorage dan indexedDB digunakan untuk penyimpanan data offline dalam HTML5. Apa perbedaan utama mereka dan mana yang lebih disukai dalam situasi apa?

Di permukaan, kedua teknologi itu tampaknya sebanding secara langsung, namun jika Anda menghabiskan waktu dengannya, Anda akan segera menyadari bahwa itu tidak sama. Mereka dirancang untuk mencapai tujuan yang sama, penyimpanan sisi klien, tetapi mereka mendekati tugas yang dihadapi dari perspektif yang sangat berbeda dan bekerja paling baik dengan jumlah data yang berbeda.

localStorage, atau lebih tepatnya Penyimpanan Web , dirancang untuk jumlah data yang lebih kecil. Ini pada dasarnya hanya penyimpanan kunci - nilai , dengan API sinkron sederhana . Bagian terakhir adalah kuncinya. Meskipun tidak ada dalam spesifikasi yang melarang Penyimpanan DOM asinkron, saat ini semua implementasi bersifat sinkron (yaitu memblokir permintaan). Bahkan jika Anda tidak keberatan menggunakan penyimpanan nilai kunci yang naif untuk jumlah data yang lebih besar, klien Anda akan keberatan menunggu selamanya aplikasi Anda dimuat.

indexedDB , di sisi lain, dirancang untuk bekerja dengan jumlah data yang jauh lebih besar. Pertama, secara teori, ia menyediakan API yang sinkron dan asinkron. Namun dalam praktiknya, semua implementasi saat ini tidak sinkron, dan permintaan tidak akan memblokir antarmuka pengguna dari pemuatan. Selain itu, indexedDB, seperti namanya, menyediakan indeks . Anda dapat menjalankan kueri yang belum sempurna pada basis data Anda dan mengambil catatan dengan mencari kunci mereka dalam rentang kunci tertentu . indexedDB juga mendukung transaksi , dan menyediakan tipe sederhana (misalnya Tanggal).

Pada titik ini, indexedDB mungkin tampak solusi terbaik untuk setiap situasi. Namun, ada penalti untuk semua fitur-fiturnya: Dibandingkan dengan DOM Storage, API-nya cukup rumit. indexedDB mengasumsikan keakraban umum dengan konsep basis data, sedangkan dengan Penyimpanan Web Anda dapat langsung masuk. Jika Anda pernah bekerja dengan cookie, Anda tidak akan memiliki masalah bekerja dengan Penyimpanan Web. Selain itu, secara umum Anda harus menulis lebih banyak kode dalam indexedDB untuk mencapai hasil yang persis sama seperti di Penyimpanan Web (dan lebih banyak kode = lebih banyak bug). Selain itu, meniru Penyimpanan Web untuk browser yang tidak mendukungnya relatif mudah. Dengan indexedDB, tugas tidak akan sebanding dengan waktunya. Terakhir, sebelum Anda masuk ke indexedDB, Anda harus terlebih dahulu melihat API Kuota .

Pada akhirnya, itu sepenuhnya terserah Anda jika Anda menggunakan Penyimpanan Web atau indexedDB, atau keduanya, dalam aplikasi Anda. Kasus penggunaan yang baik untuk Penyimpanan Web adalah untuk menyimpan data sesi sederhana, misalnya nama pengguna, dan menyimpan beberapa permintaan Anda ke database aktual Anda. Fitur tambahan indexedDB, di sisi lain, dapat membantu Anda menyimpan semua data yang Anda perlukan agar aplikasi Anda bekerja secara offline.

Jawaban @yannis luar biasa. Hanya ingin menambahkan beberapa hal.

1. Dalam beberapa situasi, seperti Pekerja Layanan, Anda tidak dapat menggunakan kode pemblokiran, karenanya, Anda tidak bisa menggunakan localStorage, dan harus menggunakan sesuatu seperti indexedDB.

2. API untuk indexedDB rumit dan membosankan (saya akan mengatakan "mengerikan", YMMV). Ada beberapa "wrapper" pustaka untuk menyederhanakan API, saya sangat menyarankan Anda melihatnya.

Bagi saya, saya menemukan bahwa saya dapat menyimpan gumpalan di IndexedDB sedangkan di localStorage saya dapat menyimpan string saja. Ini berarti bahwa IndexdDB lebih baik untuk data biner seperti gambar, audio, video. Ya kita dapat menyimpan gambar di base64 di Penyimpanan lokal, tetapi gumpalan akan lebih kecil dan lebih cepat karena kita tidak perlu men-decode mereka.

Kutipan dari MDN :

The keys and the values are always strings.

Tentang 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