Ana içeriğe geç
Software Dictionary

Yan yana

IndexedDBvsLocal Storage

IndexedDB ile localStorage arasındaki fark nedir?

Güncellendi 2 dk okuma8 fark

Kısaca

localStorage, metin saklayan küçük ve senkron bir depodur; IndexedDB ise büyük yapılandırılmış veriler ve dosyalar için asenkron bir tarayıcı veritabanıdır.

Web Geliştirmes. 28

IndexedDB

Indexed Database API

IndexedDB, web tarayıcılarına yerleşik bir veritabanıdır; dosyalar dahil büyük miktarda yapılandırılmış veriyi indeksler ve transaction'larla cihazda saklar.

IndexedDB sayfasını oku
Web Geliştirmes. 34

Local Storage

Local storage, bir sitenin kullanıcının cihazında anahtar-değer çiftleriyle metin saklamasını sağlayan tarayıcı özelliğidir; veri tarayıcı kapansa da kalır.

Local Storage sayfasını oku

IndexedDB ve Local Storage karşılaştırması

ÖzellikIndexedDBLocal Storage
TürObject store'ları, indeksleri ve transaction'ları olan eksiksiz bir veritabanıBasit bir anahtar-değer deposu
Saklanan veriNesneler, diziler, tarihler ve dosyalar, dönüştürmedenYalnızca metin; nesneler JSON.stringify'dan geçer
KapasiteBoş diske bağlı olarak çoğu zaman yüzlerce megabayt ya da daha fazlasıOrigin başına yaklaşık 5 MB
API tarzıAsenkron: olaylı istekler ya da bir sarmalayıcıyla promise'lerSenkron: her çağrı bitene kadar sayfayı bekletir
AramaAnahtarla, indeks aralıklarıyla ve cursor'larlaYalnızca tam anahtarla
Transaction'larVar; bir grup yazma bütün olarak ya başarılı ya da başarısız olurYok; her setItem tek başınadır
Worker'lardaWeb worker'larda ve service worker'larda kullanılabilirYalnızca sayfanın kendisinde, worker'larda değil
En uygun olduğu yerÇevrimdışı veri, önbelleğe alınmış API yanıtları, büyük listeler, dosyalarKüçük ayarlar: tema, dil, bayraklar, kısa bir taslak

Fark, açıklamalı

İkisi de veriyi tarayıcıda, kullanıcının cihazında, her origin için ayrı tutar. localStorage basit bir anahtar-değer deposudur: metin anahtarlar altında metinler saklar; veri setItem ile yazılır, getItem ile okunur. IndexedDB ise tarayıcıya yerleşik eksiksiz bir veritabanıdır: object store'lar JavaScript nesnelerini anahtarlar altında tutar, indeksler kayıtları başka alanlara göre bulur, transaction'lar da ya tamamı başarılı olan ya da hiçbiri gerçekleşmeyen yazmaları gruplar.

Asıl farklar boyut, veri modeli ve zamanlamadır. localStorage origin başına yaklaşık 5 MB ile sınırlıdır ve yalnızca metin saklar; bu yüzden nesneler JSON.stringify'dan geçer. Çağrıları da senkrondur ve çalışırken sayfayı bekletir. IndexedDB ise genellikle boş diskin büyük bir bölümünü kullanabilir, nesneleri, tarihleri ve dosyaları doğrudan saklar ve asenkrondur; böylece büyük okuma ve yazmalar arayüzü dondurmaz. Ayrıca localStorage'ın bulunmadığı web worker'larda ve service worker'larda da çalışır.

IndexedDB kullanan birçok uygulama localStorage'ı da kullanır. Tema, dil ya da bir özellik bayrağı (feature flag), sayfanın hemen istediği birkaç baytlık veridir, bu yüzden localStorage daha basittir; çevrimdışı bir posta kutusu, önbelleğe alınmış API yanıtları ya da binlerce taslaktan oluşan bir liste ise IndexedDB'ye aittir. Ham IndexedDB API'si uzun ve olay tabanlıdır; bu yüzden pek çok proje, promise desteği ekleyen idb ya da Dexie.js gibi küçük bir sarmalayıcı kullanır.

Sık yapılan bir yanlış, IndexedDB'nin tarayıcıdaki bir SQL veritabanı olduğu düşüncesidir. Tablo ya da sorgu yoktur; yalnızca anahtarlar, indeksler ve kayıtları tek tek dolaşan cursor'lar vardır. Bir başkası, iki deponun da kalıcı ya da gizli olduğu düşüncesidir: navigator.storage.persist() izni verilmedikçe tarayıcılar yer azaldığında ikisini de silebilir ve XSS ile enjekte edilen betik dahil sayfadaki her betik ikisini de okuyabilir.

Hangisini kullanmalısınız?

IndexedDB şu durumlarda doğru seçim:

  • Çevrimdışı kayıt kopyası ya da dosyalar gibi çok miktarda veri saklıyorsunuz.
  • Kayıtları anahtar dışındaki alanlara göre aramanız gerekiyor.
  • Birkaç yazmanın birlikte başarılı ya da başarısız olması gerekiyor.
  • Veriye bir web worker'ın ya da service worker'ın ihtiyacı var.

Local Storage şu durumlarda doğru seçim:

  • Tema ya da kapatılmış bir banner gibi birkaç küçük değer saklıyorsunuz.
  • Sayfa değeri hemen okumalı; örneğin temayı ilk boyamadan (first paint) önce uygulamak için.
  • Basitlik, kapasiteden ya da yapıdan daha önemli.

Veriyi iki yolla kaydetmek (JavaScript)

IndexedDBjavascript
// IndexedDB, here through the small idb wrapper: objects, indexes, async
import { openDB } from "idb";

const db = await openDB("mail", 1, {
  upgrade(db) {
    const store = db.createObjectStore("messages", { keyPath: "id" });
    store.createIndex("byDate", "receivedAt");
  },
});
await db.put("messages", { id: 7, subject: "Hi", receivedAt: new Date() });
const byDate = await db.getAllFromIndex("messages", "byDate");
Local Storagejavascript
// localStorage: strings only, synchronous, no indexes
const prefs = { theme: "dark", fontSize: 16 };
localStorage.setItem("prefs", JSON.stringify(prefs));

const saved = JSON.parse(localStorage.getItem("prefs") ?? "{}");
saved.theme; // "dark", available at once, no await

Sık sorulan sorular

IndexedDB, localStorage'dan ne kadar fazla veri saklayabilir?

Çok daha fazla. localStorage origin başına yaklaşık 5 MB'ta durur; IndexedDB ise origin'in depolama kotasını paylaşır ve bu kota modern tarayıcılarda çoğu zaman yüzlerce megabayt ya da daha fazladır. Gerçek değeri navigator.storage.estimate() bildirir.

localStorage, IndexedDB'den daha mı hızlı?

Tek ve küçük bir değer için localStorage'ı okumak hızlıdır ve await gerektirmez. Çok sayıda ya da büyük kayıtta ise daha kötüdür, çünkü her çağrı sayfayı bekletir; IndexedDB ise asenkron çalışır ve yalnızca bir indeksin gösterdiği kayıtları getirebilir.

IndexedDB'yi bir service worker'da kullanabilir miyim?

Evet; orada çevrimdışı verinin olağan yeri de odur. localStorage ise service worker'larda ve diğer web worker'larda kullanılamaz.

Daha fazla

Ayarlar

EnglishTürkçe