LocalStorage ın indexedDB'den farkı nedir?

localStorage ve indexedDB, HTML5'te verilerin çevrimdışı depolanması için kullanılır. Temel farkları nelerdir ve hangileri hangi durumlarda tercih edilir?

Yüzeyde iki teknoloji doğrudan karşılaştırılabilir görünebilir, ancak onlarla biraz zaman geçirirseniz, onların yakında olmadığını anlarsınız. Benzer bir hedefe, müşteri tarafında depolamaya ulaşmak için tasarlandılar, ancak eldeki işe önemli ölçüde farklı bakış açılarıyla yaklaşıyorlar ve farklı miktarlarda verilerle en iyi şekilde çalışıyorlar.

localStorage veya daha doğru bir Web Depolama , daha az miktarda veri için tasarlanmıştır. Temelde basit bir senkronize API ile sadece anahtar-değer depolama dizeleridir . Bu son kısım anahtardır. Belirtimde eşzamansız DOM Depolama'yı yasaklayan hiçbir şey olmamasına rağmen, şu anda tüm uygulamalar eşzamanlıdır (yani istekleri engelleme). Daha büyük miktarlarda veri için naif bir anahtar-değer depolama alanı kullanmaktan sakıncası olmasanız bile, müşterileriniz uygulamanızın yüklenmesini sonsuza kadar beklemeyi düşünecektir.

Diğer yandan, indexedDB , çok daha büyük miktarda veriyle çalışmak üzere tasarlanmıştır. İlk olarak, teoride, hem senkron hem de asenkron bir API sağlar. Bununla birlikte, pratikte mevcut tüm uygulamalar asenkrondir ve istekler kullanıcı arayüzünün yüklenmesini engellemeyecektir. Ek olarak, indexedDB, adından da anlaşılacağı gibi, indexler sağlar . Temel sorguları veritabanınızda çalıştırabilir ve anahtarlarını belirli anahtar aralıklarında arayarak kayıtları alabilirsiniz . indexedDB ayrıca işlemleri destekler ve basit türler sağlar (örn. Tarih).

Bu noktada, indexedDB, şimdiye kadar her durum için üstün bir çözüm gibi görünebilir. Ancak, tüm özellikleri için bir ceza var: DOM Storage ile karşılaştırıldığında, API oldukça karmaşık. indexedDB, veritabanı kavramlarına genel bir aşinalık getirir; oysa Web Depolama ile doğrudan içeri atlayabilirsiniz. Çerezlerle daha önce çalıştıysanız, Web Depolama ile çalışma konusunda sorun yaşamayacaksınız. Ayrıca, genel olarak Web Depolaması ile aynı sonucu elde etmek için indexedDB'de daha fazla kod yazmanız gerekir (ve daha fazla kod = daha fazla hata). Ayrıca, Web Depolama'yı desteklemeyen tarayıcılar için taklit etmek nispeten basittir. IndexedDB ile görev zamanına değmez. Son olarak, indexedDB'ye dalmadan önce, önce Kota API'sine bir göz atmalısınız .

Günün sonunda, uygulamanızda Web Storage veya indexedDB veya her ikisini birden kullanıyorsanız tamamen size kalmış. Web Depolama için iyi bir kullanım örneği, basit oturum verilerini, örneğin bir kullanıcının adını saklamak ve bazı isteklerinizi gerçek veritabanınıza kaydetmektir. indexedDB'nin ek özellikleri ise uygulamanızın çevrimdışı çalışması için ihtiyaç duyduğunuz tüm verileri kaydetmenize yardımcı olabilir.

@ yannis cevap mükemmel. Sadece birkaç şey eklemek istiyorum.

1. Servis Çalışanları gibi birkaç durumda, engelleme kodunu kullanamazsınız, bu yüzden localStorage kullanamazsınız ve indexedDB gibi bir şey kullanmalısınız.

2. IndexedDB'nin API'si karmaşık ve can sıkıcıdır ("korkunç" diyecek kadar ileri giderdim, YMMV). API'yi basitleştirmek için birkaç "sarmalayıcı" kitaplığı vardır , bunlara bakmanızı şiddetle tavsiye ederim.

Benim için, ben saklayabilir bulundu lekeler localStorage içinde sadece dizeleri saklayabilirsiniz iken IndexedDB içinde. IndexdDB'nin görüntü, ses, video gibi ikili veriler için daha iyi olduğu anlamına gelir. Evet, görüntüleri baseS64 içinde localStorage içinde saklayabiliriz, ancak bloblar daha küçük ve daha hızlı olacaktır çünkü kodları çözmemize gerek yoktur.

MDN'den alıntı :

The keys and the values are always strings.

IndexedDB Hakkında :

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