Yan yana

CookievsLocal Storage

Q: Local storage ile session storage arasındaki fark nedir?

İkisi aynı API'yi paylaşır, ama sessionStorage tek bir tarayıcı sekmesiyle sınırlıdır ve sekme kapanınca temizlenir; localStorage ise sekmeler ve yeniden başlatmalar boyunca kalır.

Cookie ile local storage arasındaki fark nedir?

Güncellendi 30 Eylül 20262 dk okuma7 fark

Kısaca

Cookie'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.

Web Geliştirmes. 7

Cookie

Cookie, bir web sitesinin tarayıcıdan saklamasını ve sonraki isteklerle geri göndermesini istediği, çoğunlukla oturum açık tutmak için kullanılan küçük veridir.

Cookie sayfasını oku

Web Geliştirmes. 29

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

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

Özellik	Cookie	Local Storage
Sunucuya gönderilme	Eşleşen her HTTP isteğiyle kendiliğinden	Hiçbir zaman; betiklerin veriyi açıkça göndermesi gerekir
Boyut sınırı	Cookie başına yaklaşık 4 KB	Çoğu tarayıcıda origin başına yaklaşık 5 MB
Geçerlilik süresi	`Expires` ya da `Max-Age` ile belirlenir, ya da tarayıcı oturumuyla biter	Yok; kod ya da kullanıcı temizleyene kadar kalır
JavaScript erişimi	`HttpOnly` işaretli değilse `document.cookie` ile okunabilir	Aynı origin'deki her betik tarafından her zaman okunabilir
Kapsam	Bir alan adı ve yol; isteğe bağlı olarak alt alan adları dahil	Tam bir origin: şema, ana makine ve port
API	`Set-Cookie` başlığı ve `document.cookie` metni	Basit `setItem`, `getItem` ve `removeItem` metotları
En uygun olduğu yer	Oturumlar, kimlik doğrulama ve sunucunun ihtiyaç duyduğu ayarlar	Yalnızca istemciyi ilgilendiren ayarlar, önbellekler ve kaydedilmemiş taslaklar

Fark, açıklamalı

Cookie, sunucunun Set-Cookie başlığıyla (ya da bir betiğin) ayarladığı ve tarayıcının aynı siteye yapılan sonraki isteklere eklediği küçük bir ad-değer çiftidir. Local storage ise bir tarayıcı API'si olan localStorage'dır; JavaScript'in tek bir origin için metinleri anahtarlar altında kaydetmesini sağlar ve kendiliğinden ağ trafiği oluşturmaz.

Temel fark, verinin kimin için olduğudur. Cookie'ler sunucunun tarayıcıyı tanıması için vardır; bu yüzden her istekle birlikte yolculuk eder ve her biri yaklaşık 4 KB ile sınırlıdır. Local storage sayfanın kendi betikleri içindir; bu yüzden daha fazla veri tutar, origin başına genellikle yaklaşık 5 MB, ve isteklere hiçbir şey eklemez.

Çoğu zaman yan yana çalışırlar. Bir site oturumu, JavaScript'in okuyamadığı bir HttpOnly cookie'de tutarken tema gibi arayüz tercihlerini ya da gönderilmemiş bir taslağı local storage'da saklayabilir. İkisinin de kapsamı vardır: cookie'lerin kapsamı bir alan adı ve yoldur, local storage'ın kapsamı ise tam bir origin'dir (şema, ana makine ve port).

Sık yapılan bir yanlış, local storage'ın kimlik doğrulama token'ları için güvenli bir yer olduğu düşüncesidir. Sayfada çalışan her betik, XSS açığıyla enjekte edilen betik dahil, onu okuyabilir; HttpOnly cookie ise JavaScript'in erişimi dışındadır. Local storage kendiliğinden de asla sona ermez; kod ya da kullanıcı temizleyene kadar durur.

Hangisini kullanmalısınız?

Cookie şu durumlarda doğru seçim:

Sunucunun değere her istekte ihtiyacı var, örneğin bir oturum kimliği.
HttpOnly bayrağıyla JavaScript'i veriden uzak tutmak istiyorsunuz.
Verinin belirli bir zamanda kendiliğinden sona ermesini istiyorsunuz.

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

Veriye yalnızca istemci tarafındaki kodun ihtiyacı var.
Birkaç kilobayttan fazla alana ihtiyacınız var.
Verinin her isteğe ağırlık eklemesini istemiyorsunuz.

Bir değeri iki yolla saklamak

Cookiejavascript

// Server sets a cookie that the browser sends back
res.setHeader(
  "Set-Cookie",
  "sessionId=abc123; HttpOnly; Secure; SameSite=Lax; Max-Age=3600"
);

// Every later request to the site now includes:
// Cookie: sessionId=abc123

Local Storagejavascript

// A script stores data in the browser only
localStorage.setItem("theme", "dark");

// Read it back later, even after a restart
const theme = localStorage.getItem("theme"); // "dark"

// Nothing reaches the server unless you send it
localStorage.removeItem("theme");

Sık sorulan sorular

Local storage, cookie'lerden daha mı güvenli?

Gizli veriler için değil. Sayfadaki her betik local storage'ı okuyabilir, bu yüzden bir XSS açığı orada saklananları çalabilir; oturum token'ları için HttpOnly, Secure bir cookie daha güvenli yerdir.

Cookie'leri temizlemek local storage'ı da temizler mi?

Genellikle evet. Çoğu tarayıcıda cookie'leri ve site verilerini temizleme seçeneği local storage'ı da siler; yine de bazı ayarlar ikisini ayrı ayrı temizlemenize izin verir.

Local storage ile session storage arasındaki fark nedir?

İkisi aynı API'yi paylaşır, ama sessionStorage tek bir tarayıcı sekmesiyle sınırlıdır ve sekme kapanınca temizlenir; localStorage ise sekmeler ve yeniden başlatmalar boyunca kalır.