“Local Storage” Konsepti

Bu yazımızda, “local storage” ve “session storage” konseptlerini detaylı bir şekilde ele alacağız.

“Local Storage” Nedir?

Kelime anlamı olarak “yerel depolama” anlamına gelen “local storage”, web tarayıcılarındaki küçük veri parçalarını saklamak için kullanılan mekanizmayı tanımlar.

“Local Storage”ın temel amacı, kullanıcıların tarayıcılarında veri depolamalarına olanak tanımaktır. Bu sayede, web siteleri kullanıcının son ziyaretinden kalan bilgileri, tercihleri veya diğer verileri saklayabilir. Kullanıcının bir sonraki ziyaretinde bu bilgilere erişim sağlanarak daha özelleştirilmiş bir deneyim sunulabilir. Örneğin, bir alışveriş sitesinde sepete eklenen ama satın alınmayan ürünler, kullanıcının tarayıcısında “local storage” aracılığıyla saklanarak, kullanıcının siteye tekrar geldiğinde sepetindeki ürünleri görmesine imkan tanır. Böylesi bir özellik, hem kullanıcının deneyimini zenginleştirir hem de web sitelerine kullanıcının davranışlarına dair daha derinlemesine bilgi edinme şansı sunar.

Web’in emekleme zamanlarında web siteleri statik bir yapıya sahipti ve haliyle kullanıcı etkileşimi de minimal bir haldeydi. Zamanla interaktif hale gelmeye başlayan sitelerde kullanıcıların tercihleri, seçimleri veya oturum bilgileri gibi veriler ortaya çıkmış ve bunları saklama ihtiyacı hasıl olmuştur.

İlk başlarda, web siteleri bu bilgileri “çerezler” (cookies) kullanarak saklamışlardır. Ancak, her HTTP isteğiyle birlikte sunucuya otomatik olarak gönderilirler. Bu durum, özellikle çok sayıda veya büyük çerezler kullanıldığında, bant genişliğinin gereksiz yere tüketilmesine neden olmaktadır. Ayrıca, çerezlerin sınırlı bir depolama kapasitesi vardır, bu da web sitelerinin sadece sınırlı miktarda veri saklamasına izin verir.

İşte bu noktada, “Local storage” mekanizması devreye girer. “Local storage”, çerezlerin karşılaştığı sınırlamalara alternatif bir çözüm sunarak kullanıcıların tarayıcısında daha büyük veri parçalarını saklama olanağı sağlar. En önemli avantajlarından biri, bu depolanan verilerin otomatik olarak sunucuya gönderilmemesidir. Haliyle, bant genişliği tüketimini minimuma iner ve verileri daha uzun süre ve daha büyük miktarda saklama kapasitesi sağlar.

JavaScript ile “Local Storage” Kullanımı

HTML5 ile birlikte gelen bu özellik, web sitelerinin tarayıcılarda “anahtar-değer” (key-value) formatında veri saklamasına imkan tanır ve istemci üzerinde veri saklamak için iki nesne sunar:

• window.localStorage ➡️ son kullanma tarihi olmadan veriyi saklar.
• window.sessionStorage ➡️ bir oturum için veriyi saklar (tarayıcı sekmesi kapandığında, yenilendiğinde veri kaybolur).

Hem sessionStorage hem de localStorage aşağıdaki 5 temel metoda sahiptir:

1. setItem(key, value): Belirli bir anahtar-değer çiftini depolar.
2. getItem(key): Belirli bir anahtar için depolanan değeri alır.
3. removeItem(key): Belirli bir anahtar için depolanan değeri siler.
4. key(index): Depolanan anahtar-değer çiftinin anahtarını, belirtilen indekse göre alır.
5. clear(): Tüm depolanan verileri siler.

// setItem ile hem localStorage hem de sessionStorage için veri saklama
localStorage.setItem('localKey', 'localValue'); // localStorage için anahtar-değer çifti ekler
sessionStorage.setItem('sessionKey', 'sessionValue'); // sessionStorage için anahtar-değer çifti ekler

// getItem ile her iki depolama türünden de veri alma
var localValue = localStorage.getItem('localKey'); // localStorage'den belirtilen anahtara sahip değeri alır
var sessionValue = sessionStorage.getItem('sessionKey'); // sessionStorage'den belirtilen anahtara sahip değeri alır

console.log('Local Storage Değeri:', localValue);
console.log('Session Storage Değeri:', sessionValue);

// removeItem ile her iki depolama türünden de belirli bir anahtar-değer çiftini silme
localStorage.removeItem('localKey'); // localStorage'den belirtilen anahtarı siler
sessionStorage.removeItem('sessionKey'); // sessionStorage'den belirtilen anahtarı siler

// key metodunu kullanarak her iki depolama türünden de ilk anahtarı alma
var firstLocalKey = localStorage.key(0); // localStorage'deki ilk anahtarı alır
var firstSessionKey = sessionStorage.key(0); // sessionStorage'deki ilk anahtarı alır

console.log('Local Storage İlk Anahtar:', firstLocalKey);
console.log('Session Storage İlk Anahtar:', firstSessionKey);

// clear ile her iki depolama türündeki tüm anahtar-değer çiftlerini silme
localStorage.clear(); // localStorage'deki tüm veriyi siler
sessionStorage.clear(); // sessionStorage'deki tüm veriyi siler

JavaScript, window.localStorage nesnesi aracılığıyla bu veriye erişebilir, onu güncelleyebilir veya silebilir. Bu sayede, web sitelerine kullanıcı tercihlerini, oturum bilgilerini ve diğer önemli verileri saklama yeteneği kazandırılmış olur. Aşağıdaki örneği inceleyiniz:

See the Pen LocalStorage by 1kodum (@1kodum) on CodePen.