Javascript'de Web Storage ~ Webkolog

Merhaba Webkolog Takipçileri!

Modern web uygulamaları, kullanıcılara daha zengin ve kişiselleştirilmiş deneyimler sunmak için sıklıkla veri depolamaya ihtiyaç duyar. Kullanıcının dil tercihini hatırlamak, sepet içeriğini saklamak veya form verilerini geçici olarak depolamak gibi senaryolarda bu depolama yeteneği hayati önem taşır. HTML5'ten önce bu tür işlevler için genellikle **JavaScript çerezleri (cookies)** kullanılırdı. Ancak çerezlerin sınırlamaları (boyut limitleri, her sunucu isteğinde gönderilme gibi) nedeniyle, web geliştiricilerinin imdadına **Web Storage API** yetişti. Web Storage, çerezlere göre daha güvenli, daha hızlı ve çok daha fazla veri depolama imkanı sunarak tarayıcı tabanlı depolamayı yepyeni bir seviyeye taşıdı. Bugün, Web Storage'ın ne olduğunu, iki ana türünü (localStorage ve sessionStorage) ve bunları projelerinizde nasıl kullanacağınızı ayrıntılı olarak inceleyeceğiz. Hazırsanız, verilerinizi tarayıcıda akıllıca yönetmeye başlayalım!

Web Storage Nedir? Neden Kullanmalıyız?

Web Storage, web sitelerinin kullanıcının yerel bilgisayarında anahtar/değer çiftleri (key/value pairs) şeklinde veri depolamasına olanak tanıyan bir API'dir. Bu, sunucuya her istek gönderildiğinde verilerin tekrar tekrar gönderilmesini gerektirmeyen, tamamen istemci tarafında (tarayıcıda) gerçekleşen bir depolama çözümüdür.

Web Storage'ın Avantajları:

Daha Güvenli: Çerezlerin aksine, Web Storage verileri her HTTP isteğiyle sunucuya otomatik olarak gönderilmez, bu da potansiyel güvenlik risklerini azaltır.
Daha Hızlı: Veri sunucuya gönderilmediği ve yerel olarak depolandığı için verilere erişim ve veri kaydetme işlemleri çok daha hızlıdır.
Daha Büyük Miktarda Veri Depolar: Çerezlerin 4KB gibi küçük bir boyutu varken, Web Storage (tarayıcıya göre değişmekle birlikte) genellikle 5MB ila 10MB arasında veri depolayabilir. Bu, daha karmaşık kullanıcı tercihleri veya çevrimdışı kullanım için veri önbellekleme gibi senaryolar için idealdir.
Veri Yönetimi Kolaylığı: Anahtar/değer yapısı ve basit JavaScript API'si sayesinde verileri kolayca ekleyebilir, okuyabilir, güncelleyebilir ve silebilirsiniz.

Web Storage Türleri: `localStorage` ve `sessionStorage`

Web Storage API, iki farklı depolama nesnesi sunar:

1. `localStorage`: Kalıcı Depolama

localStorage, tarayıcı kapatılsa veya bilgisayar yeniden başlatılsa bile verileri kalıcı olarak depolar. Depolanan verilerin bir son kullanma tarihi yoktur; veri, kullanıcı manuel olarak tarayıcı ayarlarından temizleyene kadar veya siz JavaScript koduyla silene kadar tarayıcıda kalır.

Kullanım Alanları:

Kullanıcı tercihleri (tema ayarları, dil seçimi)
Kullanıcının daha önce girdiği form verileri
Çevrimdışı kullanım için uygulama verilerinin önbelleğe alınması
Sepet içeriği (kullanıcı tarayıcıyı kapatıp açsa bile kalmasını istediğiniz durumlar)

Kullanım Şekli:


// Veri Ekleme (Anahtar ve değer her zaman string olmalıdır)
localStorage.setItem("kullaniciAdi", "webkolog_developer");
localStorage.setItem("tema", "dark");
localStorage.setItem("sonGirisZamani", new Date().toISOString());

// Veri Okuma
const kullaniciAdi = localStorage.getItem("kullaniciAdi");
console.log("Kullanıcı Adı:", kullaniciAdi); // Çıktı: webkolog_developer

// Veri Güncelleme
localStorage.setItem("tema", "light"); // 'dark' olan tema 'light' olarak güncellendi

// Veri Silme (belirli bir anahtara göre)
localStorage.removeItem("sonGirisZamani");
console.log("Son Giriş Zamanı:", localStorage.getItem("sonGirisZamani")); // Çıktı: null

// Tüm Verileri Silme (localStorage'daki tüm anahtar/değer çiftlerini siler)
// Dikkatli kullanın!
// localStorage.clear();

Önemli Not: localStorage ve sessionStorage sadece string verileri depolar. Eğer bir JavaScript nesnesini veya dizisini depolamak isterseniz, bunları JSON.stringify() ile string'e dönüştürmeli, okurken de JSON.parse() ile tekrar JavaScript nesnesine çevirmelisiniz.


const kullaniciAyarlari = {
    dil: "tr",
    bildirimler: true,
    profilResmi: "avatar.jpg"
};

// Nesneyi string'e çevirip kaydet
localStorage.setItem("ayarlar", JSON.stringify(kullanimiAyarlari));

// String'i alıp tekrar nesneye çevir
const kaydedilenAyarlarStr = localStorage.getItem("ayarlar");
const kaydedilenAyarlar = JSON.parse(kaydedilenAyarlarStr);

console.log("Kaydedilen Ayarlar:", kaydedilenAyarlar);
console.log("Dil Ayarı:", kaydedilenAyarlar.dil); // Çıktı: tr

2. `sessionStorage`: Oturum Tabanlı Depolama

sessionStorage, verileri yalnızca mevcut tarayıcı oturumu boyunca depolar. Kullanıcı tarayıcıyı kapattığında (sekme kapandığında veya tarayıcı penceresi kapandığında), sessionStorage'daki tüm veriler silinir. Bu, geçici veriler için idealdir.

Kullanım Alanları:

Tek oturumluk form verileri (sayfa yenilense bile kalmalı, ama tarayıcı kapanınca silinmeli)
Geçici kullanıcı oturumu bilgileri (yeniden giriş gerektirmeyen, ancak tarayıcı kapanınca sıfırlanması gerekenler)
Gezinti sırasında geçici olarak saklanması gereken veriler (örn. bir ödeme akışındaki adımlar)

Kullanım Şekli:

sessionStorage'ın kullanım metotları localStorage ile tamamen aynıdır.


// Veri Ekleme
sessionStorage.setItem("geciciMesaj", "Hoş geldiniz, bu mesaj oturumunuz bitene kadar kalacak.");

// Veri Okuma
const mesaj = sessionStorage.getItem("geciciMesaj");
console.log("Oturum Mesajı:", mesaj);

// Veri Silme (belirli bir anahtara göre)
sessionStorage.removeItem("geciciMesaj");

// Tüm Verileri Silme (sessionStorage'daki tüm anahtar/değer çiftlerini siler)
// sessionStorage.clear();

`localStorage` ve `sessionStorage` Arasındaki Temel Farklar:

İki depolama türünü özetlemek gerekirse:

Kalıcılık: localStorage verileri tarayıcı kapatılsa bile kalıcıdır; sessionStorage verileri tarayıcı oturumu kapandığında (sekme veya pencere) imha edilir.
Erişim Kapsamı: localStorage verileri aynı kaynaktan (domain, protokol ve port) gelen tüm sekmeler ve pencereler arasında paylaşılır. sessionStorage verileri ise sadece o anki sekme için geçerlidir; aynı sitede başka bir sekme açsanız bile o sekme kendi sessionStorage'ına sahip olur.
Otomatik Gönderim: Her iki Web Storage türündeki veriler de HTTP istekleriyle sunucuya otomatik olarak gönderilmez (çerezlerin aksine).

Tarayıcı Desteği ve Güvenlik

Web Storage, modern tarayıcıların tamamı tarafından geniş ölçüde desteklenir. Tarayıcıların geliştirici araçlarını (Developer Tools) kullanarak "Application" veya "Uygulama" sekmesi altında Local Storage ve Session Storage verilerini görüntüleyebilir ve yönetebilirsiniz.

Güvenlik açısından, Web Storage verileri sadece aynı kaynaktan (origin) erişilebilir. Yani, webkolog.com üzerinde depolanan verilere baskasite.com erişemez. Ancak, Web Storage'ın hassas veriler (şifreler, kredi kartı bilgileri) için uygun olmadığını unutmayın. XSS (Cross-Site Scripting) saldırılarına karşı savunmasız olabilirler, bu nedenle kritik bilgileri sunucu tarafında güvenli bir şekilde depolamak her zaman en iyisidir.

Sonuç

Web Storage API, modern web uygulamalarında istemci tarafı veri depolama için çerezlere kıyasla çok daha güçlü ve esnek bir çözüm sunar. localStorage ile kalıcı verileri, sessionStorage ile ise oturum bazlı geçici verileri etkili bir şekilde yönetebilirsiniz. Kullanıcı deneyimini kişiselleştirmek, uygulama performansını artırmak ve çevrimdışı yetenekler eklemek için bu API'leri doğru bir şekilde kullanmak, bir web geliştiricisi olarak size büyük avantajlar sağlayacaktır. Verilerinizi akıllıca depolayarak, daha hızlı ve kullanıcı dostu uygulamalar inşa edebilirsiniz.

Webkolog'u takipte kalın!

Hepinize bol kodlu ve güvenli depolama deneyimleri dilerim!

7 Aralık 2016 Çarşamba