Tarayıcı Bilgi Saklama : Local & Session Storage

nhtctn nhtctn

Öncelikle Local ve Session storage nedir bunları anlatarak başlamak istiyorum.

Local Storage: Tarayıcı geçmişi temizlenene ya da tarayıcı tamamen silinene kadar tuttuğu bilgileri saklamaktadır.

Session Storage: Tarayıcı kapandığı andan itibaren tuttuğu bilgiyi silmektedir.

Ortak Özellikler
* Her ikisi de kullanıcı bilgisayarında tutulur.
Key, value string tipinde değer alırlar.

Storageler çerez mantığı ile çalışmaktadır. Aralarındaki en büyük farklardan biri performans farkıdır.

* Depolama boyutu storagelerde sınırsızken çerezlerde maksimum 4KB’a kadar çıkabilmektedir.

* Çerezler HTTP request ile iletilebilir fakat storagelerin her ikisinde de iletilmez.

* Çerezlerin bir son kullanım tarihi varken storagelerde bir kullanım tarihi yoktur.

Local ve Session Storage Kullanımı

Local ve Session Storage kullanımları aşağıdaki gibidir.

setItem()

localStorage.setItem(key, value);
sessionStorage.setItem(key, value);

Örnek

const firstName = localStorage.setItem('firstName','Nihat');
const lastName = localStorage.setItem('lastName','ÇETİN');

Storagelere ‘key’ ile bir anahtar sözcük ve ‘value’ ile bir değer atayarak veriyi depolarız.

getItem()

localStorage.getItem(key);
sessionStorage.getItem(key);

Örnek

val = localStorage.getItem('firstName');
val = localStorage.getItem('lastName');

Tuttuğumuz veriyi sadece verdiğimiz ‘key’ ile çağırmak okurken bize yeterli olacaktır.

removeItem()

localStorage.removeItem(key);
sessionStorage.removeItem(key);

Örnek

 localStorage.removeItem('firstName');
 localStorage.removeItem('lastName');

‘key’ini belirttiğimiz veriyi silmemize yarar.

clear()

localStorage.clear();
sessionStorage.clear();

Tüm Storage’i temizlemek için kullanılır.

Ekstra Bilgi

let val;

let hobies = ['kitap okumak','spor yapmak','yüzmek'];

Yukarıda dizimizi oluşturduk. Şimdi ise dizimizi localStorage set edelim yani ekleyelim, ve tarayıcımızı kontrol ettiğimizde dizi olarak eklenmediğini göreceğiz

localStorage.setItem('hobies',hobies);

Bunun için yapmamız gereken JSON.stringify() metodunu kullanmaktır.

localStorage.setItem('hobies',JSON.stringify(hobies));

Şimdi ise dizi olarak eklediğimiz hobies dizisini console ekranına yazdırmaya…Aşağıdaki gibi console yazdırmaya çalıştık ama olmadı.

val = localStorage.getItem('hobies')

Bunun için JSON.parse() metoduna ihtiyacımı var. 

val =JSON.parse(localStorage.getItem('hobies'));

Yorum yazın

BENZER YAZILAR