Web siteleri, kullanıcı verilerini saklamak için HTML5'in özelliklerinden biri olan Web Storage kullanabilir Web Storage, tarayıcının yerel depolama kapasitesini kullanarak veri depolama ve yönetme imkanı sağlar Local Storage, tarayıcının hafızasında kalıcı olarak saklanabilecek verileri tutarken, Session Storage ise tarayıcı penceresi açıkken geçici verilerin depolanmasını sağlar Web Storage verileri tarayıcı ölçeğinde saklanabileceği için, Cookies'tan daha avantajlıdır Web Storage, daha fazla veri depolama kapasitesi sunar ve sınırsız sayıda veri öğesi depolayabilir

Web siteleri, kullanıcılarının girdiği verileri saklamak için bir depolama yöntemi kullanır. Bu depolama yöntemi olarak, HTML5'in özelliklerinden biri olan Web Storage kullanılabilir. Web Storage, tarayıcının yerel depolama kapasitesini kullanarak veri depolama ve yönetme imkanı sağlar. Sitenin performansını yükseltirken, kullanıcı verilerinin korunmasına da yardımcı olur.

Web Storage iki farklı depolama alanı sunar: Local Storage ve Session Storage. Local Storage, tarayıcıda kalıcı verileri saklamak için kullanılırken, Session Storage çalışma zamanında geçici verilerin depolanabilmesine olanak tanır. Web Storage ile tanımlanmış veriler, herhangi bir sunucuya gönderilmeden sadece tarayıcı içinde saklanır.

Local Storage

Web Storage, kullanıcıların tarayıcıda depolama kapasitesini kullanarak verileri tutmalarına ve bu verilere web uygulamalarından erişmelerine olanak tanır. Local Storage, Web Storage'ın bir parçasıdır ve tarayıcının depolama kapasitesini kullanarak verileri kaydetmek için kullanılır.

Local Storage, tarayıcının hafızasında kalıcı olarak saklanabilir. Verilerin kaydedilmesi, güncellenmesi ve silinmesi için kullanılabilir. Tarayıcı kapatılsa bile, kaydedilen veriler hala depolama alanında kalır ve sonraki seferde erişilebilir olur.

Local Storage, iki temel özellik sunar: anahtar-değer çiftleri ve kısıtlama. Anahtar-değer çiftleri, kullanıcıların depolama alanında belirli bir anahtarla birlikte verileri saklamalarına olanak tanır. Kısıtlamalar arasında veri boyutu ve maksimum depolama alanı gösterilir. Tarayıcıda müsait olan ve belirtilen boyut sınırları içindeki veriler depolanabilir.

Özellik	Açıklama
Anahtar-Değer Çiftleri	Local Storage, anahtar-değer çiftleri kullanarak veri depolama işlevi görür. Kullanıcılar, anahtar değeriyle birlikte veri kaydedebilirler. Sonraki seferlerde verilere anahtar değeri kullanılarak erişilebilir.
Kısıtlama	Local Storage, belirli bir boyuta ve depolama alanına sahiptir. Kullanıcılar yalnızca mevcut depolama kapasitesi dahilinde veri depolayabilirler.

Local Storage, tarayıcıda depolama kapasitesine sahip olan modern web tarayıcıları tarafından desteklenir. Bununla birlikte, her tarayıcının depolama kapasitesi ve desteği farklıdır. Kullanıcılar, kullanacakları tarayıcının hangi depolama yöntemini desteklediğini bilmeli ve en uygun yöntemi seçmelidir.

Session Storage

Session Storage, tarayıcının çalışma zamanında geçici verilerin depolanması için sunulan bir Web Storage mekanizmasıdır. Bu mekanizma, tarayıcı penceresi açıkken verilerin tarayıcıda kalmasını sağlar. Ancak tarayıcı penceresi kapatıldığında Session Storage'da saklanan veriler otomatik olarak silinir.

Session Storage, görev yöneticisi tarafından oluşturulan her seans için ayrı bir depolama alanı sunar. Her seansda veriler, özel bir depolama alanına kaydedilir ve yalnızca o seansda kullanılabilir hale gelir. Bu özellik, birden fazla tarayıcı penceresinde aynı uygulama veya site kullanılırken verilerin karışmasını engeller.

Session Storage, Local Storage ile benzer şekilde ‘key-value’ çiftlerinde verileri saklar. Ancak kısıtlama olarak, yalnızca tarayıcı penceresine özgü bir depolama alanı sağlar.

Session Storage kullanmak için, JavaScript ile oluşturulan bir ‘key-value’ çiftini depolamak istediğinizde, öncelikle session Storage nesnesini elde etmeniz gerekir. Bu işlem genellikle ‘sessionStorage’ adlı önceden tanımlanmış bir değişken aracılığıyla yapılır.

Özellik	Açıklama
öğe	Saklanacak olan veri
anahtar	Saklanacak verinin bir anahtar kelimesi

Session Storage'ın kullanımı oldukça basittir. Örneğin, aşağıdaki kod parçasında ‘kullanıcı adı’ verisini ‘user’ anahtar kelimesi altında depoluyoruz.

sessionStorage.setItem("user", "John");

Ardından, bu veriye erişmek için getItem() yöntemini kullanabiliriz.

var user = sessionStorage.getItem("user");alert(user);

Session Storage, Local Storage kadar çok boyutlu veri depolama kapasitesi sunmaz. Ancak, küçük sayıdaki verileri depolamak için mükemmeldir ve verilerin güvenliği için kullanılabilir.

Cookies ile Karşılaştırma

Cookies, Web Storage'ın popülerleşmeden önce en çok kullanılan yöntemlerden biriydi. İkisi de web tarayıcısında verileri depolamanın bir yoludur, ancak Web Storage'ın birçok açıdan Cookies'tan daha avantajlı olduğu bilinmektedir.

Web Storage verileri, tarayıcı önbelleği ve diğer web sayfaları tarafından erişilemez. Aynı zamanda, Cookies genellikle sadece belirli bir web sitesi ile ilişkilendirilirken, Web Storage verileri tarayıcı ölçeğinde saklanabilir. Bu özellik, aynı web sitesi tarafından farklı işlevler arasında paylaşılan verilerin saklanmasını daha kolay hale getirir.

Cookies, her web isteği sırasında sunucuya gönderilebilir, Web Storage ise iyileştirilmiş performans için tarayıcıda saklanır. Bu, Web Storage verilerinin daha hızlı erişilebilir olduğu ve daha az ağ trafiği oluşturduğu anlamına gelir.

Web Storage ayrıca, daha fazla veri depolama kapasitesi sunar ve sınırsız sayıda veri öğesi depolayabilir. Cookies ise sınırlı veri depolama kapasitesine sahiptir ve belirli bir web sitesi için aynı anda yalnızca birkaç tanesi depolanabilir.

Bununla birlikte, Cookies hala bazı avantajlar sunmaktadır. Cookies, sunucu tarafından güvenli bir şekilde saklanabilir ve sunucu ile istemci arasında verilerin paylaşılmasını sağlar. Ayrıca, Web Storage'ın bazı tarayıcılarda desteklenmediği bilinmektedir.

Genel olarak, Cookies ve Web Storage, web sitelerinde verilerin depolanması için kullanılan iki farklı yöntemdir. Web Storage, daha hızlı, daha güvenli ve daha fazla depolama kapasitesi sunar. Ancak bazı durumlarda, Cookies hala daha etkili bir seçenek olabilir.

Depolama Alanı

Web Storage, tarayıcının yerel depolama alanında çalışır ve verileri key-value çiftleri olarak saklar. Bununla birlikte, herhangi bir veri türü depolayabilirsiniz. Ancak, bazı tarayıcılar, data URI'leri ve blob'ları gibi bazı ögeleri saklama konusunda sınırlamalar getirir. Ayrıca, Web Storage'ın depolama kapasitesi genellikle birkaç megabaytla sınırlandırılır.

Bir Web Storage nesnesinde depolayabileceğiniz verilerin türüne örnek olarak şunlar verilebilir:

• Metin
• JSON verileri
• Array
• Object

Ancak, verilerin boyutu ve miktarı bir kısıtlama getirebilir. Web Storage'da depolanacak veri miktarı tarayıcı ayarlarına ve kullanıcının ayarlarına da bağlıdır. Bu nedenle, daha büyük verileri depolamak için başka bir yöntem kullanmak daha mantıklı olabilir.

Boyut Limitleri

Web Storage'ın sunduğu depolama alanının kısıtlı olduğu bilinmektedir. Tarayıcıların depolama alanı sınırlı olduğu için Web Storage boyut limitleri de belirli bir seviyede tutulmuştur. Genel olarak, modern tarayıcılar 5-10 MB boyutunda bir depolama alanı sağlamaktadır.

Farklı tarayıcılar, farklı boyut limitlerine sahip olabilirler. Bununla birlikte, büyük boyutlu dosyaların depolanması için Web Storage uygun bir yöntem değildir. Web Storage boyut limitleri, belirli bir seviyede tutulduğundan dolayı, boyutları büyük olan dosyaların depolanması durumunda tarayıcıda performans problemleri yaşanabilir.

Web Storage boyut limitlerine uygun bir şekilde verilerin depolanması, tarayıcıların bellek yönetimini de sağlıklı bir şekilde yapmaları açısından önemlidir. Bu sebeple, Web Storage kullanımında boyut limitleri dikkate alınarak verilerin uygun bir şekilde depolanması önerilmektedir.

Web Storage Kullanımı

Web Storage, modern web geliştirmesinde oldukça yaygın olan bir tekniktir. Web Storage özellikleri, bir tarayıcının yerel depolama alanına veri yazar ve okur. Bu depolama alanı, tarayıcının boyutu ya da kaynak kullanımı konusunda endişe duymadan, web uygulamalarının kullanabileceği bir alan sunar. Web Storage, tarayıcıda verilerin geçici olarak kaydedildiği Session Storage ve daimi olarak depolandığı Local Storage olarak iki formda mevcuttur.

Web Storage kullanımı oldukça basittir ve uygulama geliştiricilerine birçok fayda sağlar. Web Storage, sunucu tarafında çalışabilecek web uygulamalarının işlevselliğini geliştirmek için kullanılır. Örneğin, kullanıcılarının kişisel tercihlerini veya seçeneklerini saklamak için kullanılabilir. Ayrıca, Web Storage, daha kompleks uygulamalarda kullanılan oyun verileri gibi bilgilerin saklanması için de faydalıdır.

Web Storage kullanırken, özellikle büyük miktarda veri sakladığınızda, kullanabileceğiniz birkaç metot vardır. Bu metotlar, setItem(), getItem(), removeItem() ve clear() gibi özellikler içerir. setItem() metodu, öğeler eklemenizi veya güncellemenizi sağlar. getItem() fonksiyonu, öğeleri okumanıza izin verir. removeItem() fonksiyonu, belirli bir öğe silmenizi sağlar. clear() fonksiyonu ise tüm öğeleri siler.

Web Storage kullanımında önemli bilgilerden biri, depolama alanı sınırlamalarıdır. Browsers, belirli bir alanın üstünde bilgi saklayamaz. Local Storage'ın limiti genellikle 5 mb civarındadır. Session Storage, varsayılan olarak 5 mb olan Local Storage'nin yarısıdır.

Sonuç olarak, Web Storage'ın kullanımı oldukça basittir ve web uygulamalarının işlevselliği için önemlidir. Özellikle oyun gibi uygulamaların verilerini saklamak için kullanışlıdır. Kullanıcıların tercihleri ve seçenekleri gibi küçük verileri de saklamak için faydalıdır. Kullanıcılar, Web Storage'ın kullanımı sayesinde tarayıcılarda daha iyi ve daha etkili bir deneyim yaşarlar.

setItem() Metodu

setItem() metodu, Web Storage ile belirlenen bir anahtar-değer çiftini saklar. Kullanımı oldukça basit olan bu yöntem ile öncelikle belirlenmiş anahtar değerleri kullanarak bir storage nesnesi oluşturulur. Bu anahtarlar daha sonra getItem() ve removeItem() metodları kullanılarak elde edilebilir veya silinebilir.

setItem() metodu, iki parametre alır: anahtar ve değer. Anahtarın sağlanması zorunludur, ancak değer isteğe bağlıdır. Eğer değer sağlanmazsa, gönderilen anahtarın değeri boş bir dize olarak atanır.

Örnek olarak, bir üyelik formu düşünelim. Formun doldurulduktan sonra, verileri kaydetmek için Web Storage kullanabiliriz. Böylece kullanıcı formu yeniden doldurmadan bilgilerini kaydedebilir.

Anahtar	Değer
isim	Jane
soyisim	Doe
email	jane.doe@example.com

Bu veriler, setItem() metodu kullanılarak bir storage nesnesine depolanabilir:

localStorage.setItem("isim", "Jane");localStorage.setItem("soyisim", "Doe");localStorage.setItem("email", "jane.doe@example.com");

Bu veriler localStorage objesi içinde tutulurlar ve daha sonra istediğimiz zaman getItem() metodu kullanılarak alınabilir.

var isim = localStorage.getItem("isim");var soyisim = localStorage.getItem("soyisim");var email = localStorage.getItem("email");console.log(isim); // Janeconsole.log(soyisim); // Doeconsole.log(email); // jane.doe@example.com

Bu örnek, setItem() ve getItem() metodlarının kullanımını detaylı olarak göstermektedir. Web Storage, anahtarları ve değerleri depolamak ve daha sonra kullanmak için çok kullanışlı bir yöntemdir. Bu nedenle, JavaScript projelerinizde Web Storage'ı aktif bir şekilde kullanmanızı öneririz.

getItem() Metodu

Web Storage ile depolanan verilerin alınması için kullanılan getItem() metodu, key(parametre) ile belirtilen veriyi geri döndürür. Eğer, belirtilen anahtar yoksa null değeri döndürür. getItem() metodu, özellikle kullanıcının tercihlerinin kaydedilmesi veya form verilerinin kaydedilmesi konusunda sıklıkla kullanılır.

Örneğin, bir kullanıcının tercihlerini kaydetmek için:

Anahtar	Değer
renkSecimi	mavi
kategori	elektronik

Yukarıdaki örnekte, kullanıcının seçtiği renk ve kategori tercihleri getItem() metodu ile çağrılabilir. Örneğin, renkSecimi anahtarı ile getItem() metodu kullanılırsa, sonuç "mavi" değeri olarak dönecektir.

Örnek kullanımı:

  var renk = localStorage.getItem("renkSecimi");  console.log(renk); // "mavi"

Yukarıdaki örnekte, "renkSecimi" anahtarı ile getItem() metodu kullanılarak renk değişkenine atama yapılmış ve sonuç olarak "mavi" değeri konsol ekranında gösterilmiştir.

removeItem() Metodu

Web Storage, tarayıcı üzerinde verilerin depolanması ve erişilmesine olanak sağlayan bir API'dir. Bu API, getItem() metodu ile okunabilir verileri döndürürken, setItem() metodu ile verilerin kaydedilmesini sağlar. removeItem() metodu ise Web Storage'da bulunan bir nesneyi silmek için kullanılır.

removeItem() metodu, sadece belirli bir anahtarla ilişkilendirilmiş veriyi silmek için kullanılır. Bu yöntem, veriyi tamamen sildiği için geri dönüşü yoktur, bu nedenle veriyi silmeden önce kullanıcıya onaylatmak daha güvenli olacaktır.

removeItem() metodu, aşağıdaki şekilde kullanılabilir:

Kullanım	Açıklama
localStorage.removeItem("anahtar");	localStorage'dan veriyi siler.
sessionStorage.removeItem("anahtar");	sessionStorage'dan veriyi siler.

Örneğin, bir oyunun kaydedilmiş verilerini saklamak için Web Storage kullanılmış ve kullanıcının kaydedilmiş bir oyunu silmesine izin verilmesi istenmiştir. Aşağıdaki kod, removeItem() metodunun nasıl kullanılacağına dair bir örnek sunar:

var oyunKayitlari = JSON.parse(localStorage.getItem("oyunKayitlari"));// kullanıcının seçtiği kaydı silme işlemifunction kaydiSil(anahtar) {  if (confirm("Kaydı silmek istediğinizden emin misiniz?")) {    localStorage.removeItem(anahtar);    // sayfayı yenileme    window.location.reload();  }}for (var kayit in oyunKayitlari) {  var secenek = document.createElement("option");  secenek.value = kayit;  secenek.textContent = oyunKayitlari[kayit].tarih;  secenek.onclick = function() {    kaydiSil(this.value);  }  document.getElementById("kayitlar").appendChild(secenek);}

Yukarıdaki örnekte, kayıtları bir seçenek listesi olarak görüntülemek için bir döngü oluşturduk. Kullanıcı bir kaydı sildiğinde, kaydiSil() fonksiyonu çalışır ve seçili kaydı localStorage'dan siler.

clear() Metodu

Web Storage kullanımında işlemleri yapılandırmak ve depolanan verileri kontrol etmek için çeşitli yöntemler vardır. Bu yöntemlerden biri de clear() metodu olarak bilinir. Bu yöntem, depolama alanındaki tüm verileri silmek için kullanılır ve parametre alması gerekmez.

Örneğin, kullanıcının hesap ayarlarını depolamak için kullanılan bir Web Storage alanı olduğunu varsayalım. Kullanıcı hesabını silmek istediğinde, clear() metodu kullanılarak depolama alanındaki tüm veriler temizlenebilir.

Metod	Açıklama
clear()	Depolama alanındaki tüm verileri siler.

clear() metodu öncesinde başka bir yöntem çağrılmış olsa bile, bu metot çağrıldığında depolama alanındaki tüm veriler silinir. Metot, herhangi bir geri dönüş değeri döndürmez.

• Öncelikle, Web Storage ile ilgili bir uygulamada kullanılan depolama alanının tanımlanması gereklidir.
• Daha sonra, clear() metodu çağrılarak depolama alanındaki tüm veriler silinebilir.
• Örnek kod:

// Depolama alanını tanımlamavar storage = window.localStorage;// Depolama alanındaki tüm verileri silmestorage.clear();

Bu şekilde, örneğin bir hesap ayarı gibi depolama alanındaki tüm veriler silinir. clear() metodu, Web Storage kullanımının depolama alanını kontrol etmek ve gerektiğinde verileri silmek için kullanışlı bir yöntemdir.

Oyun Verilerinin Kaydedilmesi

Oyun verileri, Web Storage kullanılarak kolayca kaydedilebilir ve oyun deneyimi için önemli bir rol oynamaktadır. Örneğin, bir oyuncu oyunu oynarken kazandığı puanları, oyunun son kaydedilme noktasını vb. kaydedebilir. Bu sayede, oyuncular oyunu daha kolay bir şekilde yeniden başlatabilirler.

Web Storage, oyun verileri için mükemmel bir kaynak sağlar. Yerel depolama (local storage) veya oturum depolama (session storage) kullanarak, oyunun ilerlemesi, skor tablosu vb. gibi verileri kolayca saklayabilirsiniz. Örneğin, kullanıcıların oyunu kaydetmek veya yüklemek için bir butonu tıklaması gerekebilir. Bu butona tıklandığında, veriler Web Storage'da depolanır ve gerektiğinde geri getirilir.

Bir skor tablosunu Web Storage kullanarak nasıl saklayabileceğinizi gösteren bir örnek kullanalım. Aşağıdaki kod satırı, bir dizi (array) içinde saklanan skorları local storage'a kaydedecektir:

// Skorlar dizisivar scores = [30, 10, 50, 20, 40];// Local storage'a kaydetlocalStorage.setItem('scores', JSON.stringify(scores));

JSON.stringify fonksiyonu, verileri bir dize haline getirir ve bu dize local storage'a kaydedilir. Skorlar daha sonra gerektiğinde getirilebilir:

// Local storage'dan skorları alın ve diziye atanvar scores = JSON.parse(localStorage.getItem('scores'));// Skorları sıralascores.sort();// Sonraki adımda skorları ekrana yazdırın.

Bir oyun ilerlemesinin otomatik olarak kaydedilmesi için Web Storage kullanabilirsiniz. İşte basit bir örnek:

// Yeni bir oyun başlatıldığında, local storage'dan oyunun son kaydedilme noktasını getirvar lastCheckpoint = JSON.parse(localStorage.getItem('lastCheckpoint'));// Oyun oynandıkça, son kaydedilme noktasını güncellelastCheckpoint = currentCheckpoint;// Oyun otomatik olarak kaydedildikten sonra, güncel son kaydedilme noktasını local storage'a kaydetlocalStorage.setItem('lastCheckpoint', JSON.stringify(lastCheckpoint));

Bir sonraki seferde, kullanıcı oyunu açtığında veriler otomatik olarak yüklenir ve oyun, son kaydedilme noktasından devam eder.

Skor Tablosu Örneği

Web Storage, oyun geliştirme sürecinde oldukça faydalıdır. Özellikle oyun skorlarının kaydedilmesinde kullanıcılara kolaylık sağlar. Skor tablosu örneğinde, kullanıcının girmiş olduğu skorların kaydedilip gösterilmesi hedeflenir.

İlk olarak, kaydedilecek skorların bir array içine alınması gerekir. Bu array daha sonra Web Storage'a kaydedilecektir. Örneğin:

var skorlar = [530, 730, 900, 420, 620];

Daha sonra, Web Storage kullanarak array'in kaydedilmesi sağlanabilir. Bunun için setItem() metodu kullanılır. Örneğin:

localStorage.setItem("skorlar", JSON.stringify(skorlar));

Bu kod sayesinde, skorlar adlı key ile array, JSON.stringify() metodu kullanılarak string'e dönüştürülerek Web Storage'da saklanır.

Son olarak, kaydedilmiş skorlar gösterilir. Bunun için öncelikle Web Storage'dan alınan string'in parse edilmesi gerekir. Örneğin:

var kayitliSkorlar = JSON.parse(localStorage.getItem("skorlar"));

Daha sonra, parse edilmiş skorlar listesi bir HTML tablosunda gösterilebilir. Örneğin:

foreach var kayitliSkorlar

endforeach

Sıra	Skor
kayitliSkorlar.index + 1	kayitliSkorlar.value

Bu şekilde, kaydedilmiş skorlar tablo halinde gösterilir. Kullanıcılar da oyunu oynarken kaydedilmiş skorları buradan görebilirler.

Otomatik Kaydetme Örneği

Web Storage, oyun geliştiricilerinin de hayatını kolaylaştırır. Özellikle, devam etme düğmesi gibi özelliklerin uygulandığı oyunlar için Web Storage otomatik kaydetme özelliği sayesinde kullanımı oldukça avantajlıdır.

Örnek olarak bir çiftlik oyunu düşünelim. Kullanıcıların çiftliklerini geliştirmeleri ve çiftliği büyütmeleri için birçok şey yapmaları gerekir. Web Storage ile çiftlik oyununun ilerlemesi otomatik olarak kaydedilerek, kullanıcıların ilerlemelerini kaybetme riski minimuma indirilir.

Kullanıcı, ilk olarak çiftliğini oluşturur ve kaydeder. Daha sonra, çiftlikte yapılacak birçok iş vardır ve kullanıcı bu işleri yapar, örneğin; bitkileri sulama, hayvanları besleme, ve ürünleri toplama. Web Storage ile ilerlemeler otomatik olarak kaydedildiğinden kullanıcı, çiftlikteki işleri tamamladıktan sonra hemen çıkabilir. Sonraki sefer oyuna girdiğinde, kaldığı yerden devam edebilir ve ilerlemesini kaybetmek zorunda kalmaz.

Bu özellik, oyun geliştiricilerinin kullanıcı deneyimini en iyi şekilde sunmasını sağlar. Kullanıcının ilerlemesi otomatik olarak kaydedildiğinden, kullanıcılar oyundan keyif alır ve ilerlemelerini kaybetme endişesi yaşamazlar. Bu da oyunun bağımlılık oluşturan özelliklerinden biri olarak karşımıza çıkar.

Yukarıdaki örnek, Web Storage'ın oyun geliştiricileri için ne kadar önemli olduğunu göstermektedir. Oyunlar genellikle büyük boyutlu olduğu için, kullanıcının ilerlemesini kaydetmek için birçok veri depolanması gerekir. Web Storage kullanarak verilerin depolanması ile kullanıcıların ilerlemeleri otomatik olarak kaydedildiğinden kayıp riski en aza indirilir ve kullanıcılar oyunlarını keyifle oynayabilirler.