localStorage dan indexedDB digunakan untuk penyimpanan data offline dalam HTML5. Apa perbedaan utama mereka dan mana yang lebih disukai dalam situasi apa?
Tutup pemilih: Walaupun saya benar-benar mengerti bagaimana ini tampak "terutama berdasarkan opini" ("vs" dalam versi aslinya tidak membantu), kedua teknologi ini jelas berbeda dan ada alasan obyektif untuk memilih satu dari yang lain. user221287 melakukan penelitian minimal sebelumnya dalam topik pertanyaan dan mendapatkan pemahaman dasar tentang konsep-konsep yang terlibat sebelum Anda bertanya kemungkinan besar akan menyelamatkan Anda dari downvotes dan menutup suara di masa depan.
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.
Pekerja layanan juga dapat menggunakan indexedDB tetapi bukan localStorage
Fabich
10
Jawaban @yannis luar biasa. Hanya ingin menambahkan beberapa hal.
Dalam beberapa situasi, seperti Pekerja Layanan, Anda tidak dapat menggunakan kode pemblokiran, karenanya, Anda tidak bisa menggunakan localStorage, dan harus menggunakan sesuatu seperti indexedDB.
API untuk indexedDB rumit dan membosankan (saya akan mengatakan "mengerikan", YMMV). Ada beberapa "wrapper" pustaka untuk menyederhanakan API, saya sangat menyarankan Anda melihatnya.
kembali tidak dapat menggunakan localStorage dan kode pemblokiran, tidak bisakah Anda membungkus kode pemblokiran dengan Janji dan menjadikannya non-pemblokiran?
joedotnot
3
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.
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
Jawaban:
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.
sumber
Jawaban @yannis luar biasa. Hanya ingin menambahkan beberapa hal.
Dalam beberapa situasi, seperti Pekerja Layanan, Anda tidak dapat menggunakan kode pemblokiran, karenanya, Anda tidak bisa menggunakan localStorage, dan harus menggunakan sesuatu seperti indexedDB.
API untuk indexedDB rumit dan membosankan (saya akan mengatakan "mengerikan", YMMV). Ada beberapa "wrapper" pustaka untuk menyederhanakan API, saya sangat menyarankan Anda melihatnya.
sumber
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 :
Tentang IndexedDB :
sumber