HTML5 Web Storage nedir?

HTML5 Web Storage nedir?

HTML5'in sunmuş olduğu yerel veri depolama yöntemi olan Web Storage, web sayfaları tarafından kullanıcı cihazlarında veri saklamaya imkan verir Bu depolama şekli, internet bağlantısı veya tarayıcıya bağımlı olmadığı için kullanıcı deneyimini geliştirir ve performansı artırır Local Storage ve Session Storage olmak üzere iki yöntemle kullanılabilirler Local Storage verileri tarayıcı kapatılsa da saklayabilen kalıcı bir depolama yöntemidir Session Storage ise sadece tek bir oturum boyunca geçerli olan verileri saklar Web Storage API, hem kullanıcılara hem de web geliştiricilerine veri ekleme, çekme ve silme gibi çeşitli işlemler yapmalarına olanak tanır Local Storage ve Session Storage'a veri ekleme ve çekme işlemleri JavaScript kullanılarak yapılabilir ve Local Storage, tarayıcı dilinde yazılmış herhangi bir web uygulamasında kullanılabilir Kullanımda JSONstringify ve JSONparse metotları da kullanılabilir Web Storage API kullanarak sayfalar daha hızlı y

HTML5 Web Storage nedir?

HTML5'in sunduğu yerel veri depolama yöntemi olan Web Storage, web sayfalarının kullanıcı cihazlarında veri depolayabilmelerini sağlar. Bu depolama şekli, tarayıcı veya internet bağlantısı bağımlılığı olmadan verilerin saklanabilmesine imkan verir. Ayrıca Web Storage API, kullanıcı deneyimini artıran, performansı artıran ve web geliştiricilerine çeşitli imkanlar sunan bir araçtır.

Web Storage, iki yöntemle kullanılabilir: Local Storage ve Session Storage. Local Storage, web sayfasına özgü, kullanıcının cihazında saklanan ve tarayıcı olsa bile kalıcı olan verileri saklar. Session Storage ise sadece tek bir oturum boyunca geçerli olan verileri depolar. Bu sayede, aynı sayfaya farklı kullanıcılardan giriş yapıldığında bir kullanıcının verileri, diğer kullanıcının verileri ile karışmaz.

  • Web Storage, cookie'lere göre daha fazla veri saklanmasına imkan tanır.
  • Local Storage, tarayıcı kapansa bile verilerin saklanmasını sağlar.
  • Local Storage ve Session Storage, JavaScript kullanılarak veri eklenebilir, çekilebilir ve silinebilir.

Web Storage API sayesinde, görsel ögelerin yerine veri saklama teknolojisini kullanarak sayfaların daha hızlı yüklenmesi sağlanabilir. Kullanıcının cihazındaki depolama alanı dolmadığı sürece, Web Storage ile depolanan veriler herhangi bir şekilde silinmez ve tüm sayfalarda kullanılabilir.


Web Storage API

Web Storage API, HTML5'in sunduğu yerel veri depolama yöntemidir. Bu API, tarayıcılar tarafından sunulan yerel depolama mekanizmasını kullanarak, web sitelerinde veri depolama işlemlerinin gerçekleştirilmesine olanak tanır. Yerel veri depolama sayesinde web siteleri, kullanıcının tarayıcıda gezinirken geçmiş işlemlerine, seçimlerine, tercihlerine ve ayarlarına kalıcı bir şekilde erişebilirler.

Web Storage API temel olarak iki özellikten oluşur; Local Storage ve Session Storage. Local Storage, kalıcı veri saklama yaparken, Session Storage ise geçici olarak veri depolanmasını sağlar. Her iki yöntem de web sitelerinin veri depolama gereksinimlerine göre uygun seçeneklerdir.

Web Storage API, verilerin depolanması ve alınması için tarayıcı üzerinden erişilebilen basit bir API'ye sahiptir. Bu API, herhangi bir tarayıcı dilinde yazılmış web uygulamalarında kullanılabilir. Ayrıca, Local Storage ve Session Storage özellikleri, depolama yapısına erişim sağlarlar ve kullanımı oldukça kolaydır.


Local Storage

HTML5'in Web Storage API'sı, web uygulamaların yerel olarak veri depolamasını sağlamaktadır. Bu özellik sayesinde, yüksek miktarda veri depolamak ve web uygulamaları arasında veri paylaşımını sağlamak mümkündür. Web Storage API, iki farklı depolama yöntemi sunmaktadır: Local Storage ve Session Storage.

Local Storage, web uygulaması tarafından oluşturulmuş anahtar-değer çiftlerini tarayıcının belleği üzerinde saklamakta kullanılır. Bu veriler, tarayıcı kapandıktan sonra bile kalıcı olurlar. Local Storage özelliği, kullanıcıların sayfaları yeniden açtığında önceden kaydedilmiş verilerin otomatik olarak yüklenmesini sağlar. Bu özellik, tarayıcıda yerel oturum bilgilerini saklamak, kullanıcı tercihlerini kaydetmek ve alışveriş sepeti bilgilerini saklamak gibi alanlarda kullanışlıdır.

Local Storage kullanım örnekleri arasında, bir e-ticaret sitesinde alışveriş sepeti verilerini saklamak gösterilebilir. Sepete yeni ürünler eklendiğinde, bu veriler Local Storage üzerindeki anahtar-değer çiftleri aracılığıyla saklanır. Kullanıcı sayfayı yeniden ziyaret ettiğinde, Local Storage'dan sepet verileri otomatik olarak yüklenir ve kullanıcının sepete eklediği ürünler hala mevcuttur.

İşlem Açıklama
localstorage.setItem() Bir anahtar-değer çifti ekler veya günceller
localstorage.getItem() Bir anahtara karşılık gelen değeri getirir
localstorage.removeItem() Bir anahtara karşılık gelen değeri siler
localstorage.clear() Tüm Local Storage verilerini siler

Local Storage'a veri ekleme ve çekme işlemleri

Local Storage, web sitesinden bağımsız olarak kullanıcı tarafından kaydedilmiş verileri tutar. Bu veriler, tarayıcı kapandıktan sonra bile hala kaydedilmiş şekilde dururlar. Local Storage'a veri eklemek için setItem() metodu kullanılır. Bu metot, iki argüman alır: anahtar ve değer. Anahtar, kaydedilecek verinin adını belirlerken, değer ise kaydedilecek verinin kendisidir. Örneğin, "username" anahtarına "John" değerini kaydetmek için setItem("username", "John") kullanılır.

Local Storage'dan veri çekmek için getItem() metodu kullanılır. Bu metot, bir argüman alır: anahtar. Anahtar, kaydedilen veriyi belirlerken, değer ise geri döndürülen veridir. Örneğin, "username" anahtarına kaydedilen "John" değerini almak için getItem("username") kullanılır.

Local Storage aynı zamanda daha karmaşık verileri, örneğin nesneleri içerebilir. Bunun için JSON.stringify() ve JSON.parse() metotları kullanılabilir. JSON.stringify() metoduna verilen nesne, JSON formatına dönüştürülür ve daha sonra Local Storage'a kaydedilir. JSON.parse() metodu ise Local Storage'dan dönen değeri JSON formatından nesneye geri dönüştürür.

Metot Açıklama Örnek Kullanımı
setItem() Local Storage'a veri ekler localStorage.setItem("username", "John");
getItem() Local Storage'dan veri alır localStorage.getItem("username");
JSON.stringify() Nesneyi JSON formatına dönüştürür localStorage.setItem("user", JSON.stringify({name: "John", age: 30}));
JSON.parse() JSON formatındaki veriyi nesneye dönüştürür var user = JSON.parse(localStorage.getItem("user"));

Local Storage'a kaydedilebilecek maksimum veri boyutu 5MB'dir. Ancak, bu limit kullanıcının tarayıcısına göre değişiklik gösterebilir. Bu nedenle, Local Storage kullanırken dikkatli olmakta fayda vardır. Veri silmek için removeItem() metodu kullanılabilir. Anahtar verildiğinde bu metot, o anahtarla kaydedilmiş veriyi Local Storage'dan siler. Tüm verileri silmek için ise clear() metodu kullanılabilir.


setItem() ve getItem() metotları

LocalStorage ve SessionStorage, web sayfaları tarafından kullanılan yerel veri depolama yöntemleridir. Bu veri depolama yöntemlerinin kullanımı, Javascript aracılığıyla gerçekleştirilir. LocalStorage, belirgin bir zaman sınırı olmaksızın verilerin tutulduğu kalıcı bir depolama alanıdır. SessionStorage ise oturum açılıp kapatıldıktan sonra verilerin silineceği geçici bir depolama alanıdır.

LocalStorage ve SessionStorage depolama yöntemlerinde veri ekleme işlemleri, setItem() metodunu kullanarak gerçekleştirilir. Bu metot, iki parametre alır. İlk parametre, kaydedilecek verinin anahtar değeridir ve ikinci parametre, kaydedilecek verinin kendisidir.

Örnek olarak, LocalStorage'ta "username" anahtarına "john1" değerinin kaydedilmesi için aşağıdaki kod bloğu kullanılabilir:

```localStorage.setItem("username", "john1");```

Veri çekme işlemleri ise getItem() metodunu kullanarak gerçekleştirilir. Bu metot, tek bir parametre alır ve alınan bu parametre, çekilecek verinin anahtar değeridir.

Örnek olarak, yukarıda kaydedilen "username" değerinin alınması için aşağıdaki kod bloğu kullanılabilir:

```localStorage.getItem("username");```

setItem() ve getItem() metodları, hem LocalStorage hem de SessionStorage için geçerlidir ve kullanımı oldukça basittir.


Local Storage limitleri

Local Storage özelliği, tarayıcı hafızasında uzun süreli olarak saklanması gereken veriler için oldukça kullanışlıdır. Ancak, hafıza limitleri nedeniyle bu depolama yöntemi için belirli limitler vardır. Her web sitesi için ayrılmış olan local storage alanı 5-10MB dolaylarındadır.

Yani, web sayfalarında depolanabilecek veri miktarı bu limitler dahilinde olmalıdır. Ancak, tarayıcının kullanım durumuna bağlı olarak local storage alanı dolabilir veya hatalar verebilir. Özellikle, farklı tarayıcı türleri için limitler farklılık gösterebilir.

Bu nedenle, geliştiricilerin kodlama işleminde belirli bir sınırı aşmamaları ve gereksiz verileri silmeleri önemlidir. Bununla birlikte, local storage özelliğini kullanırken bilgi güvenliği de dikkate alınması gereken bir unsurdur. Çünkü local storage verileri, başka web siteleri tarafından kullanılabilir.

Dolayısıyla, web sitesinde saklanacak verilerin türüne ve çeşidine göre local storage limitleri dikkate alınmalıdır. Ayrıca, gereksiz verilerin silinmesi ve güvenlik önlemlerinin alınması ile local storage özelliği güvenli bir şekilde kullanılabilir.


Local Storage temizleme işlemi

Local Storage özelliği, tarayıcıda yerel olarak saklanan verilerin hafifletilmiş bir sürümünü sunar. Ancak, bu verilerin temizlenmesi gereken durumlar olabilir. Local Storage'ta kaydedilmiş tüm verileri silmek için ise basit bir yöntem vardır.

Verileri Local Storage'dan silmek için kullanabileceğiniz yöntem removeItem() metodu kullanmaktır. Bu metot, Local Storage'tan belirli bir anahtar kelimeye sahip veriyi (key-value pair) siler. Örneğin, aşağıdaki kod parçası, "username" anahtar kelimesi olan Local Storage verisini silecektir:

```javascriptlocalStorage.removeItem("username");```

removeItem() metodu, herhangi bir hata fırlatmaz. Eğer Local Storage'da bulunmayan bir anahtar kelimeye sahip bir veriyi silmeye çalışırsanız, bu metot yalnızca hiçbir şey yapmayacaktır.

Eğer tüm Local Storage verilerini silmek istiyorsanız, aşağıdaki kod parçasını kullanabilirsiniz:

```javascriptlocalStorage.clear();```

Bu kod, tüm Local Storage verilerini siler ve geri dönüş değeri bulunmaz (undefined) olarak döner.

Local Storage temizleme işlemini gerçekleştirmek, kullanıcıların tarayıcılarında sahip oldukları verileri kontrol etmek için önemli bir yöntemdir. Ancak, verileri silerken dikkatli olmalısınız. Eğer gerekli olmayan verileri silerseniz, kullanıcıların işlemleri yavaşlayabilir veya bazı uygulamaların çalışmasını engelleyebilirsiniz. Bu nedenle, kullanıcıların verilerini silmeden önce onayını almalarını sağlayan bir onay penceresi veya benzeri bir mekanizma eklemek, daha iyi bir kullanıcı deneyimi sağlayacaktır.


Session Storage

Session Storage, HTML5 ile birlikte sunulan bir yerel veri depolama özelliğidir. Local Storage gibi, tarayıcının yerel veri depolama kapasitesini kullanır ve kullanıcının tarayıcı oturumu boyunca saklanan verileri depolar. Session Storage, web sayfaları arasında veri paylaşmaktan ziyade, yalnızca tek bir sayfa içinde verileri yönetmek için kullanılır.

Session Storage özelliğini kullanarak, web uygulamaları kullanıcının tarama geçmişi hakkında bilgi toplayabilir. Örneğin, kullanıcının sitede gezinirken tercih ettikleri dil veya listeledikleri ürün kategorileri Session Storage'da depolanabilir ve tarama sırasında kullanılabilir.

Session Storage ile veri depolama ve çekme işlemleri Local Storage gibi kolaydır. SessionStorage.setItem() metodu veri eklemek için kullanılırken, SessionStorage.getItem() metodu veriyi çekmek için kullanılır.

Session Storage'a eklenen veriler, tarayıcı oturumu sırasında korunur ve kullanıcının oturumu sonlandırıldığında silinir. Session Storage'da da Local Storage gibi limitler mevcuttur. Bu limitler işletim sistemi ve tarayıcıya göre farklılık gösterir, ancak genellikle 5-10 MB arasındadır.

Session Storage temizleme işlemi ise oldukça basittir. sessionStorage.clear() yöntemi kullanarak, tarayıcı oturumu boyunca saklanan tüm verileri temizleyebilirsiniz.

Session Storage özelliği, tarayıcıda depolanması gereken geçici verilerin yönetimi açısından oldukça kullanışlıdır. Session Storage kullanarak, web uygulamaları iş akışını ve kullanıcı deneyimini geliştirebilir.


Session Storage'a veri ekleme ve çekme işlemleri

Session Storage, kullanıcı oturumu boyunca verileri tutabilen bir yerel depolama yöntemidir. Bu yöntem, Local Storage'dan farklı olarak tarayıcı kapatıldığında verileri otomatik olarak siler. Session Storage'a veri eklemek ve çekmek için aşağıdaki yöntemler kullanılabilir:

  • SessionStorage.setItem(key, value) - Veri ekleme işlemi. İki parametre alır: anahtar (key) ve değer (value).
  • SessionStorage.getItem(key) - Veri çekme işlemi. Bir parametre alır: anahtar (key).

SessionStorage.setItem() yöntemi, LocalStorage.setItem() yöntemi ile benzer şekilde kullanılabilir. Örneğin:

SessionStorage.setItem('username', 'johndoe');

SessionStorage.getItem() yöntemi ise anahtar (key) parametresi ile belirtilen veriyi çekmek için kullanılır. Örneğin:

var username = SessionStorage.getItem('username');console.log(username); // outputs 'johndoe'

Böylece, Session Storage kullanarak verileri tarayıcı oturumu boyunca saklamak ve çekmek oldukça kolay bir işlem haline gelir.


SessionStorage.setItem() ve SessionStorage.getItem() metotları

Session Storage, web sitelerinde oturum süresince veri depolama imkanı sunan bir özelliktir. SessionStorage.setItem() metoduyla veri ekleme işlemi gerçekleştirilirken, SessionStorage.getItem() metoduyla da kaydedilmiş veriler Session Storage'dan çağrılarak kullanılabilir. İşlevsel ve kullanışlı bir özellik olan Session Storage, web siteleri için oldukça yararlıdır.

SessionStorage.setItem() metodu kullanılarak, Web Storage API aracılığıyla Session Storage'a veri eklenebilir. Öncelikle, bir anahtar değeri belirlenerek bu değere karşılık gelecek veri atanır. Örneğin, "username" anahtarına "JohnDoe" verisi atanır. Böylelikle, Session Storage üzerinde "username" anahtarına sahip bir değer mevcut olur.

SessionStorage.getItem() metodu ise belirli bir anahtara sahip veriyi çağırmak için kullanılır. Örneğin, "username" anahtarına sahip değeri çağırmak için getItem() metodunu kullanabilirsiniz. Bu sayede, Session Storage'da kaydedilmiş olan "JohnDoe" verisine erişim sağlayabilirsiniz.

Bu metodların kullanımı oldukça basittir. İki adet parametre alırlar: anahtar değeri ve bu anahtar değerine karşılık gelecek veri. Böylece, belirli bir ölçüde veri depolama işlemi gerçekleştirilir.

Metot Parametreler Açıklama
SessionStorage.setItem() key, value Belirtilen anahtar değeri ile değere Session Storage'da kaydedilen veriyi ekler.
SessionStorage.getItem() key Belirtilen anahtar değerine sahip Session Storage'da kaydedilen veriyi çağırır.

Bu şekilde kullanılacak olan SessionStorage.setItem() ve SessionStorage.getItem() metotları, web sitelerinde tek seferde veri depolama ve çağırma işlemi için oldukça idealdir. Hem web sitelerinin performansını artırır, hem de veri depolama işlemi için alternatif bir yöntem sunar.


Session Storage oturum limitleri

Session Storage özelliği, sayfa oturumu sırasında tutulan geçici verilerin saklanması için kullanılır. Her bir tarayıcı sekmesi veya penceresi birbirinden bağımsız olarak bir oturum oluşturur ve bu oturum sırasında Session Storage kullanılabilir. Ancak, her oturumun bir limiti vardır.

Session Storage limitleri tarayıcıya bağlı olarak değişebilir. Genellikle tarayıcıların bir oturum için önerilen limiti 5-10MB arasındadır. Ancak, bununla birlikte tarayıcının mevcut belleği de limitlerin belirlenmesinde etkili olabilir.

Dikkat edilmesi gereken bir diğer nokta ise, oturum sonlandığında veya kullanıcı tarayıcıyı kapattığında, tüm Session Storage verilerinin silineceğidir. Bu nedenle, kalıcı verilerin saklanması gerektiğinde Local Storage kullanılması daha uygun olabilir.


Session Storage temizleme işlemi

Session Storage, web uygulamalarında geçici olarak saklanan verileri tutmak için kullanılan bir özelliktir. Bazen bu geçici veriler silinmek istenebilir, bu nedenle Session Storage temizleme işlemi oldukça önemlidir.

Session Storage'da kaydedilen verilerin silinmesi için kullanılabilecek yöntemler şunlardır:

  • SessionStorage.clear() metodu: Bu metot, tüm session storage verilerini siler.

Örneğin, aşağıdaki kod segmentiyle tüm session storage verileri temizlenebilir:

  SessionStorage.clear();  

Session Storage verilerinin temizlenmesi, kullanıcı verileri açısından oldukça önemlidir. Özellikle, kişisel bilgileri veya hassas verileri içeren form verileri gibi özel verilerin depolandığı web uygulamalarında session storage'un düzenli olarak temizlenmesi tavsiye edilir.

Bu nedenle, web uygulaması geliştiricileri, kullanıcı verilerinin korunması için bu temizleme işlemini rutin bir şekilde gerçekleştirmelidirler.