Yan yana
Local StoragevsSession Storage
localStorage ile sessionStorage arasındaki fark nedir?
Güncellendi 2 dk okuma7 fark
Kısaca
İkisi de aynı API ile metin saklar; localStorage veriyi silinene kadar bütün sekmeler için, sessionStorage ise kapanana kadar tek bir sekme için tutar.
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ı okuSession Storage
Session storage, metni anahtar-değer çiftleri olarak yalnızca tek bir sekme için saklayan tarayıcı özelliğidir; veri yenilemede kalır, sekme kapanınca silinir.
Session Storage sayfasını okuLocal Storage ve Session Storage karşılaştırması
| Özellik | Local Storage | Session Storage |
|---|---|---|
| Ömür | Kod ya da kullanıcı silene kadar | Sekmesi kapanana kadar; sayfa yenilemelerinde kalır |
| Kapsam | Aynı origin'in bütün sekme ve pencerelerince paylaşılır | Yalnızca tek sekme; her yeni sekme aynı site için bile boş başlar |
| Tarayıcı yeniden başlatılınca | Hâlâ yerinde | Silinir; tarayıcı sekmeyi geri yüklerse dönebilir |
| API | setItem, getItem, removeItem ve clear | Aynı metotlar, sessionStorage üzerinde |
| Boyut sınırı | Çoğu tarayıcıda origin başına yaklaşık 5 MB | Aynı: origin başına yaklaşık 5 MB |
| Sekmeler arası senkron | Diğer sekmeler değişiklikleri storage olayıyla öğrenir | Mümkün değil; her sekmenin verisi kendine özel kalır |
| Tipik kullanım | Tema, dil, kapatılmış banner'lar, kaydedilmiş ayarlar | Çok adımlı form taslakları, kaydırma konumu, sekme başına bir kez gösterilen bildirimler |
Fark, açıklamalı
localStorage ve sessionStorage, her tarayıcıya yerleşik Web Storage API'nin iki yarısıdır. İkisi de tek bir origin için metin anahtarlar altında metin saklar, ikisi de aynı metotları sunar: setItem, getItem, removeItem ve clear; ikisi de senkrondur ve genellikle origin başına yaklaşık 5 MB ile sınırlıdır. Her ikisinde de nesneler JSON.stringify ile kaydedilir ve JSON.parse ile geri okunur.
Asıl fark ömür ve kapsamdır. localStorage verisi aynı origin'in bütün sekme ve pencerelerince paylaşılır ve kod ya da kullanıcı silene kadar, tarayıcı yeniden başlatıldıktan sonra bile kalır. sessionStorage verisi ise tek bir sekmedeki tek bir origin'e aittir: sayfa yenilemelerinde ve ileri geri gezinmede kalır, ama yeni bir sekme aynı site için bile boş başlar ve sekmeyi kapatmak veriyi siler.
Yani seçim, verinin ne kadar yaşaması gerektiğinden çıkar. Tema, dil ya da kapatılmış bir banner her ziyarette hatırlanmalıdır, bu yüzden yeri localStorage'dır; yarısı doldurulmuş çok adımlı bir form, bir kaydırma konumu ya da sekme başına bir kez gösterilen bir bildirim o anki sekmeye aittir, bu yüzden sessionStorage'a gider. Birçok uygulama ikisini birlikte kullanır. localStorage'daki değişiklikler ayrıca sitenin açık olan diğer sekmelerinde bir storage olayı tetikler; bu da sekmelerin senkron kalmasını sağlar.
Sık yapılan bir yanlış, sessionStorage'ın bir oturum açma (login) oturumuna ya da bir oturum çerezine (session cookie) bağlı olduğu düşüncesidir. Sunucuyla hiçbir ilgisi yoktur: isteklerle asla gönderilmez ve tarayıcı kapanana kadar bütün sekmelerin paylaştığı bir oturum çerezinin aksine tek bir sekmeye aittir. İki depo da parola ya da token için güvenli değildir; çünkü XSS ile enjekte edilen betik dahil sayfadaki her betik ikisini de okuyabilir.
Hangisini kullanmalısınız?
Local Storage şu durumlarda doğru seçim:
- Veri bir sonraki ziyarette de yerinde olmalı; örneğin tema ya da dil.
- Sitenin her sekmesi aynı değeri görmeli.
- Sekmeler birbirinin değişikliklerine
storageolayıyla tepki vermeli.
Session Storage şu durumlarda doğru seçim:
- Veri yalnızca o anki ziyaret boyunca önemli; örneğin yarısı doldurulmuş bir form.
- Her sekme kendi durumunu tutmalı; örneğin yan yana açık iki farklı arama.
- Sekme kapandıktan sonra tarayıcıda hiçbir şey kalmamalı.
Aynı API, iki farklı ömür
// localStorage: every tab sees it, and it is still there tomorrow
localStorage.setItem("theme", "dark");
// In any tab of the same site, now or after a restart:
localStorage.getItem("theme"); // "dark"
// Other open tabs hear about the change
window.addEventListener("storage", (event) => {
if (event.key === "theme") applyTheme(event.newValue);
});// sessionStorage: this tab only, gone when the tab closes
sessionStorage.setItem("checkout-step", "2");
// After a reload in the same tab:
sessionStorage.getItem("checkout-step"); // "2"
// In a new tab of the same site:
sessionStorage.getItem("checkout-step"); // nullSık sorulan sorular
sessionStorage sayfa yenilendiğinde kalır mı?
Evet. Sayfayı yenilemek ya da aynı sekmede başka bir sayfaya gidip geri dönmek veriyi korur. Sekmeyi kapatmak ise onu siler.
Tarayıcı kapanınca sessionStorage silinir mi?
Evet, bütün sekmelerle birlikte; ancak açılışta önceki sekmeleri geri yükleyen bir tarayıcı onların session storage verisini de geri getirebilir. localStorage ise her iki durumda da kalır.
Token saklamak için hangisi daha güvenli?
Hiçbiri. Sayfadaki her betik ikisini de okuyabilir, bu yüzden bir XSS açığı ikisini de açığa çıkarır; sessionStorage yalnızca çalınan bir değerin ne kadar süre ortada kalacağını kısaltır. Oturum token'ları HttpOnly cookie'lerde daha güvendedir.