Local Storage

Türkçe karşılığı: yerel depolama
Okunuşu: lokıl storic

Günlük kullanımda çoğunlukla İngilizcesi tercih edilir.

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

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 nedir?

JavaScript'te localStorage nesnesi üzerinden kullanılan local storage, her modern tarayıcıya yerleşik Web Storage API'sinin bir parçasıdır. Veriyi hem anahtarların hem değerlerin string olduğu anahtar-değer çiftleri olarak saklar; veri, tarayıcı kapatılıp yeniden açılsa bile, kodunuz ya da kullanıcı silene kadar cihazda kalır. Web siteleri onu seçilen tema veya dil, kapatılmış bannerlar ve kaydedilmemiş taslaklar gibi şeyleri hatırlamak için kullanır.

API küçük ve eşzamanlıdır (synchronous): setItem değer kaydeder, getItem okur, removeItem tek bir kaydı siler, clear ise her şeyi siler. Yalnızca string saklandığı için nesneler genellikle kaydetmeden önce JSON.stringify ile, okuduktan sonra JSON.parse ile dönüştürülür. Veri, protokol, alan adı ve port birleşimi olan kaynağa (origin) özeldir ve tarayıcılar genellikle kaynak başına yaklaşık 5 MB'a izin verir.

Kardeşi sessionStorage tam olarak aynı API'ye sahiptir ama hafızası daha kısadır: verisi tek bir tarayıcı sekmesine aittir ve o sekme kapatıldığında silinir. Local storage cookie'lerden de farklıdır. Cookie'ler yalnızca yaklaşık 4 KB tutar ve eşleşen her HTTP isteğiyle sunucuya otomatik olarak gönderilir; local storage ise çok daha fazlasını tutar, tarayıcıda kalır ve kodunuz göndermedikçe hiçbir yere gönderilmez.

Local storage'ı tarayıcının her web sitesi için tuttuğu küçük bir defter olarak düşünün. Sayfada çalışan her JavaScript bu defteri okuyabildiğinden, siteler arası betik çalıştırma (XSS) saldırısı içindekileri çalabilir; bu yüzden parola ya da oturum token'ı saklamamalıdır. Onlar için betiklerin okuyamadığı HttpOnly cookie'ler daha güvenlidir. Büyük veya yapılandırılmış veriler için, örneğin çevrimdışı bir uygulamanın verileri için, tarayıcılar bunun yerine IndexedDB sunar.

Önemli noktalar

Local storage, tarayıcıda her kaynak için ayrı olarak string anahtar-değer çiftleri saklar.
Veri, tarayıcı kapandıktan sonra da kod veya kullanıcı silene kadar kalır.
sessionStorage aynı API'ye sahiptir ama verisi sekme kapanınca silinir.
Cookie'lerin aksine local storage verisi isteklerle sunucuya gönderilmez.
Sayfadaki her betik onu okuyabilir; bu yüzden parola veya oturum token'ı saklamayın.

Örnek

localStorage ile veri kaydetmek ve okumakjavascript

// Save a user preference; values are always stored as strings
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // "dark"

// Store an object by converting it to JSON
const settings = { fontSize: 16, showTips: false };
localStorage.setItem("settings", JSON.stringify(settings));
const saved = JSON.parse(localStorage.getItem("settings") ?? "{}");

// sessionStorage works the same way but is cleared when the tab closes
sessionStorage.setItem("draft", "Hello...");

localStorage.removeItem("theme"); // delete a single key

Sık sorulan sorular

localStorage ile sessionStorage arasındaki fark nedir?

İkisi de tarayıcıda string anahtar-değer çiftleri saklar ve aynı API'yi paylaşır. localStorage verisi silinene kadar kalır; sessionStorage verisi ise tek bir sekmeye aittir ve o sekme kapatıldığında temizlenir.

Local storage ile cookie'ler arasındaki fark nedir?

Cookie'ler küçüktür (yaklaşık 4 KB), son kullanma tarihine sahip olabilir ve eşleşen her istekle sunucuya gönderilir; bu da onları oturumlar için uygun kılar. Local storage daha fazla veri tutar, tarayıcıda kalır ve yalnızca aynı kaynaktan JavaScript tarafından okunabilir.

Bir JWT'yi local storage'da saklamak güvenli midir?

Risklidir; çünkü XSS saldırısıyla enjekte edilen betik dahil sayfadaki her betik local storage'ı okuyabilir. Birçok güvenlik rehberi, oturum token'larını CSRF korumasıyla birlikte HttpOnly, Secure cookie'lerde tutmayı önerir.

Sık karşılaştırılanlar

Cookie vs Local StorageCookie'ler, tarayıcının eşleşen her istekle sunucuya gönderdiği küçük verilerdir; local storage ise daha büyük veriyi tarayıcıda tutar ve hiç göndermez.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin