Yaygın ön uç veri depolama çözümleri başlıca şunları içerir:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storagevb., örneğin:
| özellik | çerez | localStorage | sessionStorage | indexedDB | | Veri yaşam döngüsü | Genellikle sunucu tarafından üretilen son kullanma süresi ayarlanabilir; Ön uç benimseme ve js-cookie gibi bileşenler de oluşturulabilir | Temizlenmedikçe her zaman oradadır; Tarayıcı kapalıyken yerel olarak da kaydedilir, ancak tarayıcılar arası desteklenmez | Sayfa kapalıyken sayfanın temizlenmesi ve yenilenmesi devam eder ve sayfalar arası etkileşim desteklenmez | Temizlenmedikçe hep var olmuştur | | Veri deposu boyutu | 4K | 5M | 5M | Boyut sınırı yok | | Sunucu ile iletişim kur | Her seferinde istenen başlıkta taşınır ve bu da talebin performansını etkiler; Aynı zamanda, talebe dahil olduğu için güvenlik sorunlarına da yatkındır | Katılmıyor | Katılmıyor | Katılmıyor | | özellik | Dize anahtar-değer çiftleri verileri yerel olarak saklar | Dize anahtar-değer çiftleri verileri yerel olarak saklar | Dize anahtar-değer çiftleri verileri yerel olarak saklar | IndexedDB, ilişkisel olmayan bir veritabanıdır (SQL ifadeleri ile işlemler desteklenmez). Büyük miktarda veri depolayabilir, sorgulama arayüzleri sağlayabilir ve diğer depolama çözümlerinin sağlayamayacağı indeksler oluşturabilir. |
IndexedDB
Bu makale esas olarak ön uç depolama için IndexedDB kullanımını anlatır ve aşağıdaki şekilde tanıtılır:
IndexedDB, istemci tarafında büyük miktarda yapılandırılmış veri (aynı zamanda dosya/ikili büyük nesneler (bloblar)) depolamak için temel bir API'dir. API, verilerin yüksek performanslı aramalarını mümkün kılmak için indeksler kullanır. Web Depolama, daha küçük veri miktarlarını depolamak için faydalı olsa da, daha büyük miktarda yapılandırılmış veri depolamak kadar iyi değildir. IndexedDB bu senaryo için bir çözüm sunar. Bu sayfa, MDN IndexedDB için ana rehber sayfasıdır - burada tam bir API referans ve kullanım rehberi, tarayıcı destek bilgileri ve bazı temel kavramların açıklamalarına bağlantılar sunuyoruz.
IndexedDB aşağıdaki özelliklere sahiptir:
(1) Anahtar-değer çifti depolama. IndexedDB, veri depolamak için bir nesne deposu kullanır. Tüm veri türleri, JavaScript nesneleri dahil olmak üzere, doğrudan depolanabilir. Nesne deposunda veriler "anahtar-değer çiftleri" şeklinde saklanır ve her veri kaydının karşılık gelen bir birincil anahtarı vardır; bu anahtar benzersiz ve çoğaltılabilir, aksi takdirde bir hata atılır.
(2) Asenkron. IndexedDB tarayıcıyı kilitlemez ve kullanıcı diğer işlemleri de yapabilir; LocalStorage ise senkron olarak çalışır. Asenkron tasarım, büyük miktarda verinin okunmasını ve yazılmasını önlemek için web sayfalarının performansını yavaşlatmayı amaçlar.
(3) Destek işleri. IndexedDB işlemleri destekler; bu da işlem adımlarından biri başarısız olursa tüm işlemin iptal edileceği ve veritabanının işlem gerçekleşmeden önceki duruma geri döneceği anlamına gelir; ayrıca verinin sadece bir kısmının yeniden yazılması bir durum yoktur.
(4) Homoloji kısıtlaması. IndexedDB aynı köken sınırına tabidir ve her veritabanı, onu oluşturan alan adıyla ilişkilidir. Web sayfaları, yalnızca kendi alan adları altında veritabanlarına erişebilir, çapraz alan veritabanlarına erişemez.
(5) Büyük depolama alanı. IndexedDB, LocalStorage'dan çok daha büyük bir depolama alanına sahiptir, genellikle en az 250MB değildir ve üst sınır yoktur.
(6) İkili depolama desteği. IndexedDB sadece dizileri değil, aynı zamanda ikili verileri (ArrayBuffer nesneleri ve Blob nesneleri) de depolayabilir.
Eğer IndexedDB ile doğrudan başlamak zorsa ve kendiniz kapsüllemeniz gerekiyorsa, aşağıdaki gibi paketlenmiş paketleri kullanabilirsiniz:
- localForage: İstemci tarafı veri depoları için basit bir değer sözdizimi sağlayan basit bir Polyfill. Arka planda IndexedDB kullanıyor ve IndexedDB'yi desteklemeyen tarayıcılarda WebSQL veya localStorage'a geri dönüyor.
- Dexie.js: IndexedDB'nin wrapper'ları, basit sözdizimi sayesinde daha hızlı kod geliştirme imkanı sağlar.
- ZangoDB: MongoDB'ye benzer bir IndexedDB arayüzü; MongoDB'nin tanıdık filtreleme, projeksiyon, sıralama, güncelleme ve toplama işlevlerinin çoğunu desteklemektedir.
- JsStore: SQL sözdizimine sahip bir IndexedDB wrapper.
- MiniMongo: MongoDB istemci belleğinde yerel depolama ile destekleniyor, sunucu senkronizasyonu http üzerinden destekleniyor. MeteorJS MiniMongo kullanıyor.
- PouchDB: IndexedDB kullanarak tarayıcıda CouchDB uygulayan bir istemci.
- idb: API'nin çoğunu IndexedDB'ye benzer ama veritabanının kullanılabilirliğini büyük ölçüde artıran bazı küçük iyileştirmelerle küçük (〜1.15k) bir kütüphane.
- idb-keyval: IndexedDB ile uygulanan çok basit ve küçük (~600B) vaat tabanlı anahtar-değer çifti depolama işlemci.
- sifrr-storage: Çok küçük (~2kB) söz tabanlı istemci tarafı anahtar-değer veritabanı. IndexedDB, localStorage, WebSQL ve Cookies temelinde uygulanmıştır. Yukarıda bahsedilen desteklenen veritabanlarını otomatik olarak seçebilir ve öncelik sırasına göre kullanabilir.
- lovefield: Lovefield, web uygulamaları için ilişkisel bir veritabanıdır, JavaScript ile yazılmış, farklı tarayıcı ortamlarında çalışabilen ve hızlı, güvenli ve kullanımı kolay SQL benzeri bir API sunar.
localForage
localForage hızlı ve basit bir JavaScript deposudur. localForage, asenkron depolama (IndexedDB veya WebSQL) ve localStorage'a benzer basit bir API kullanarak web uygulamalarının çevrimdışı deneyimini iyileştirir. localForage, IndexedDB veya WebSQL desteği olmayan tarayıcılarda localStorage kullanır.
GitHub adresi:Bağlantı girişi görünür.
Çince Eğitimi:Bağlantı girişi görünür.
localForage iki farklı js dosyası sunar, farklar şunlardır:
localforage.js: Lie uygulamasını içeren bir Promise kütüphanesi (Bağlantı girişi görünür.), dosya nispeten büyüktür ve Promise sözdizimi eski tarayıcılarda kullanılabilir.
localforage.nopromises.js: Promise uygulaması yoktur, sadece yeni tarayıcı sürümleri desteklenmektedir.
Test kodu:
(Son)
|
Yayınlandı 12.10.2023 20:42:27
|
|
|
|
Ev sahibi|
Yayınlandı 2.03.2025 19:12:18
|
