JavaScript Araçları: localStorage ve sessionStorage

Pranay Kapgate2022-06-01 · 8 min read

JavaScript Araçları: localStorage ve sessionStorage

JavaScript (genellikle JS olarak kısaltılır) modern web altyapısının temellerinden biridir. Birinci sınıf fonksiyonları destekleyen hafif, yorumlanan, nesne yönelimli bir programlama dilidir. JavaScript çoğunlukla dinamik web sayfalarındaki uygulamalarıyla bilinir. Ancak özellikleri nedeniyle JavaScript, tarayıcı dışı ortamlarda da kullanılır.

Bu kılavuzda, ayrıntılı olarak ele alacağımız iki JavaScript nesnesi: : localStorage ve sessionStorage.

localStorage ve sessionStorage Genel Bakış

The objects localStorage ve sessionStorage nesneleri, web depolama API'sinin bir parçası olarak sunulur. Anahtar-değer çiftlerinin yerel olarak depolanması için harika bir araçtır. localStorage ve sessionStorage kullanımı, çerezlere harika bir alternatiftir. Bu yaklaşım bazı ek avantajlar sunar:

Veriler yerel olarak depolanır ve sunucu tarafından okunamaz. Bu, çerezlerle ilgili güvenlik sorunlarını ortadan kaldırır.
Daha yüksek depolama kapasitesi sağlar (çoğu modern tarayıcı için 10 MB'a kadar).
Basit ve anlaşılır sözdizimi.

Bu nesneler tüm modern web tarayıcılarında desteklenir, bu nedenle tarayıcı uyumluluğu konusunda bir sorun yaşanmaz. Çerezler, örneğin kimlik doğrulama gibi birçok durumda hala kullanışlıdır. Ancak, bazı durumlarda localStorage ve sessionStorage daha iyi çözümler sunar.

Gereksinimler

Bu eğitimde gösterilen adımları gerçekleştirmek için aşağıdaki bileşenlere ihtiyacınız olacak:

Düzgün yapılandırılmış bir Linux sunucusu. Bu kılavuz, CloudSigma üzerinde kendi Ubuntu sunucunuzu kurmayı göstermektedir.
Node.js JavaScript çalışma zamanı ortamı olarak. Ubuntu üzerinde Node.js kurulumu hakkında buradan daha fazla bilgi edinebilirsiniz.
Modern bir web tarayıcısı, örneğin, Google Chrome veya Firefox.

Gösterim amacıyla, bir JS betiği eklenmiş örnek bir web sayfası aldık. Bir HTML dosyasına JavaScript ekleme hakkında buradan daha fazla bilgi edinebilirsiniz:

tree_struct

VS 1

Metin düzenleyici olarak, Visual Studio Code:

Web 1

localStorage ve sessionStorage Arasındaki Fark Nedir?

Hem localStorage hem de sessionStorage aynı API'den türetilmiştir. Davranışları da aynıdır. Tek fark, her bir nesnenin verilerin kalıcılığına izin verme şeklidir. sessionStorage durumunda, veriler pencere veya sekme kapatılana kadar kalıcı olur. localStorage durumunda ise veriler, tarayıcı önbelleği temizlenene veya web uygulaması verileri temizleyene kadar kalıcı olur.

Bu eğitimde çoğunlukla localStorage üzerine odaklanacağız. Ancak, sessionStorage için sözdizimi aynıdır. localStorage kullanarak anahtar/değer çiftlerini nasıl oluşturacağınızı, okuyacağınızı ve güncelleyeceğinizi göstereceğiz..

Adım 1 – Giriş Oluşturma

We can declare an entry to the localStorage nesnesine setItem() kullanarak bir giriş tanımlayabiliriz. Bu yöntem iki argüman alır: anahtar ve buna karşılık gelen değer. Yöntem yapısı aşağıdaki gibidir:

localStorage.setItem(<key>, <value>)

1	localStorage.setItem(<key>, <value>)

Aşağıdaki örnekte, bir key değişkeni oluşturduk. setItem() yöntemini kullanarak yeni bir key belirledik ve değerini ‘value olarak ayarladık.’:

let key = 'item_1';
localStorage.setItem(key, 'value');

1 2	let key = 'item_1'; localStorage.setItem(key, 'value');

VS 2

Adım 2 – Girişleri Okuma

Şimdi, anahtarda saklanan değeri nasıl okuruz? localStorage üzerinden bir anahtar almak için getItem() yöntemini kullanacağız. Bu yöntem anahtarın adını alır ve anahtarda saklanan değerleri döndürür. Elde ettiğimiz içeriği görüntülemek için alert() yöntemini kullanacağız:

let myItem = localStorage.getItem(key);
alert(myItem);

1 2	let myItem = localStorage.getItem(key); alert(myItem);

VS 3

Ardından, web sayfasını bir web tarayıcısında açın. Sayfa, key içinde saklanan değeri göstermelidir.:

Web 2

Adım 3 – Girişleri Güncelleme

Bir değer ayarlandıktan sonra, değiştirilmediği sürece öyle kalacaktır. Aynı setItem() yöntemini aynı key üzerinde tekrar kullanırsak, eski değerin yerini otomatik olarak yenisi alacaktır.

Aşağıdaki örnekte, key ilk olarak ‘value’ değeri ile başlatılır. Bir sonraki satırda, setItem() yöntemini bir kez daha çağırdık ve değeri ‘yeni değer olarak ayarladık.’:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.setItem(key, 'new value');
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.setItem(key, 'new value');

let myItem = localStorage.getItem(key);

alert(myItem);

VS 4

Gelin bu kodu tarayıcıda çalıştırdığımızda ne olacağını görelim:

Web 3

Gördüğümüz gibi, anahtarın değeri ‘yeni değere ayarlanır’.

Adım 4 – Girişleri Silme

Eğer localStorage (ve sessionStorage üzerinde de) artık gerekli olmayan girişler varsa, bunları sonradan temizlemeniz önerilir. Bu, daha sonraki kullanımlar için daha fazla alan açar. Uygulama bellek açısından da daha verimli hale gelir.

Bir girişi localStorage üzerinden silmek için özel bir removeItem() yöntemi vardır. Bu yöntem, key değerini bir argüman olarak alır ve onu localStorage veri havuzundan kaldırır:

localStorage.removeItem(<key_to_remove>)

1	localStorage.removeItem(<key_to_remove>)

Bunu betiğimizde uygulayalım:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.removeItem(key);
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.removeItem(key);

let myItem = localStorage.getItem(key);

alert(myItem);

VS 5

Çalıştırıldığında çıktı null olacaktır, çünkü key için bir değer mevcut değildir:

Web 4

Adım 5 – Girişleri Temizleme

Önceki örnekte yalnızca bir anahtarı sildik. Ancak, localStorage depolanan tüm öğelerin tek bir adımda temizlenmesine olanak tanır. Tüm girişleri temizlemek için localStorage bize clear() yöntemini sunar. Bu yöntem hiçbir argüman almaz:

localStorage.clear();

1	localStorage.clear();

Yöntemi işe koşalım:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.clear();
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.clear();

let myItem = localStorage.getItem(key);

alert(myItem);

VS 6

Tıpkı öncesinde olduğu gibi, localStorage üzerindeki tüm girişleri kaldırır, bu yüzden key değerine erişmeye çalışırken geriye null döner:

Web 5

Adım 6 – JSON ile Çalışma

Nesneleri ve Dizileri Depolama

The localStorage ve sessionStorage nesneleri yalnızca dize (string) değerleri depolayabilir. Ancak nesneler veya dizilerle çalışmanız gereken durumlar olacaktır. Bu durumda, bunları bir dizeye dönüştürmemiz gerekir.

JavaScript, diziyi/nesneyi alıp dizelere dönüştürecek olan JSON.stringify() özelliğiyle birlikte gelir. Bu yazı, JSON formatına hızlı bir genel bakış sunmaktadır. Daha ayrıntılı bir kılavuz için JavaScript'te JSON başlıklı yazıyı okuyabilirsiniz.

Bu örnekte, sampleObj adında ve name ve location olmak üzere iki alana sahip bir nesne oluşturduk. Bunu bir dizeye dönüştüreceğiz ve key içinde depolayacağız:

let key = 'item_1';
let sampleObj = { name: "Jason", location: "Sweden" };
localStorage.setItem(key, JSON.stringify(sampleObj));
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

let sampleObj = { name: "Jason", location: "Sweden" };

localStorage.setItem(key, JSON.stringify(sampleObj));

let myItem = localStorage.getItem(key);

alert(myItem);

VS 7

Burada çıktı, nesnenin verilerini içeren dize olacaktır:

Web 6

Nesneleri ve Dizileri Okuma

Depolarken nesneleri ve dizileri dizelere dönüştürmüştük. Bu dizeyi alıp tekrar orijinal biçimine de dönüştürebiliriz. Bunu yapmak için JSON.parse() yöntemini kullanacağız. Bu yöntem bir dize alır ve onu tekrar JSON biçimine dönüştürür:

let key = 'item_1';
let sampleObj = { name: "Jason", location: "Sweden" };
localStorage.setItem(key, JSON.stringify(sampleObj));
let myItem = JSON.parse(localStorage.getItem(key));
alert(JSON.stringify(myItem, null, " "));

let key = 'item_1';

let sampleObj = { name: "Jason", location: "Sweden" };

localStorage.setItem(key, JSON.stringify(sampleObj));

let myItem = JSON.parse(localStorage.getItem(key));

alert(JSON.stringify(myItem, null, " "));

VS 8

Çıktıya gelince, daha iyi bir görünüm için onu tekrar bir dizeye dönüştürdük ve biçimlendirdik:

Web 7

Adım 7 – localStorage'da Öğe Kontrolü

Bu bölümde, localStorage ve sessionStorage herhangi bir öğe içerip içermediğini. Basit bir if ifadesi kullanarak, localStorage veya sessionStorage uzunluğunu kontrol edebiliriz. Eğer öğeler varsa, uzunluk 0'dan büyük olacaktır.

İlk olarak, aşağıdaki örneği uygulayın:

let key = 'item_1';
localStorage.setItem(key, 'new_value');
if(localStorage.length > 0){
alert('true');
}
else{
alert('false');
}

let key = 'item_1';

localStorage.setItem(key, 'new_value');

if(localStorage.length > 0){

alert('true');

}

else{

alert('false');

}

VS 9

Burada çıktı ‘true’ olacaktır çünkü şu nesnede bir anahtar bulunmaktadır: localStorage:

Web 8

Adım 8 – Öğeler Üzerinde Döngü Kurma

The localStorage ve sessionStorage nesneleri, anahtarları dizi benzeri bir yapıda saklar. Bu nesneler forEach yöntemini desteklemez, bu nedenle her bir öğe üzerinde döngü kurmak için klasik bir for döngüsü kullanma tekniğini izlememiz gerekecek.

Aşağıdaki örnekte, localStorage nesnesinin boş olup olmadığını kontrol edeceğiz. Boş değilse, her bir öğe üzerinde döngü kuracağız:

let key = 'item_1';
localStorage.setItem(key, 'new_value');
if(localStorage.length > 0){
for(i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let myItem = localStorage.getItem(key);
alert(key);
}
}
else{
alert('false');
}

let key = 'item_1';

localStorage.setItem(key, 'new_value');

if(localStorage.length > 0){

for(i = 0; i < localStorage.length; i++){

let key = localStorage.key(i);

let myItem = localStorage.getItem(key);

alert(key);

}

else{

alert('false');

}

VS 10

Çıktı, tüm öğeleri tek tek gösterecektir:

Web 9

Adım 9 – Tarayıcı Desteğini Kontrol Etme

We can check support for localStorage (ve sessionStorage) desteğini, bunun window nesnesinde mevcut olup olmadığını kontrol ederek doğrulayabiliriz. Basit bir if ifadesi işimizi görecektir:

if(window.localStorage){
alert(true);
}
else{
alert(false);
}

if(window.localStorage){

alert(true);

}

else{

alert(false);

}

VS 11

Kodu web tarayıcısında çalıştırın:

Web 10

Son Düşünceler

Bu kılavuz, tarayıcıda anahtar/değer çiftlerini saklamak için JavaScript'teki localStorage ve sessionStorage nesnelerinin nasıl kullanılacağını gösterdi. Sözdizimleriyle çalışmak çok daha kolaydır. Anahtar/değer çiftlerinin nasıl oluşturulacağını, kaldırılacağını ve güncelleneceğini gösterdik. Ayrıca nesneleri ve dizileri dizelere dönüştürerek (ve tersi şekilde) saklamayı da ele aldık.

JavaScript bilginizi daha da derinleştirmek için şu adresteki eğitimlerimize göz atabilirsiniz: blogumuz:

Keyifli Kodlamalar!

Pranay Kapgate

Yazar · CloudSigma

Preslav Dobrev, CloudSigma'da Kreatif Tasarımcı olarak görev yapmakta olup geleneksel ve yenilikçi pazarlama kanallarını kullanarak tutarlı bir kurumsal kimlik oluşturmaya odaklanmaktadır. Sanatsal vizyonu stratejik pazarlamayla harmanlayarak etkili marka anlatıları oluşturma konusunda oldukça yeteneklidir.

JavaScript Araçları: localStorage ve sessionStorage

localStorage ve sessionStorage Genel Bakış

Gereksinimler

localStorage ve sessionStorage Arasındaki Fark Nedir?

Adım 1 – Giriş Oluşturma

Adım 2 – Girişleri Okuma

Adım 3 – Girişleri Güncelleme

Adım 4 – Girişleri Silme

Adım 5 – Girişleri Temizleme

Adım 6 – JSON ile Çalışma

Nesneleri ve Dizileri Depolama

Nesneleri ve Dizileri Okuma

Adım 7 – localStorage'da Öğe Kontrolü

Adım 8 – Öğeler Üzerinde Döngü Kurma

Adım 9 – Tarayıcı Desteğini Kontrol Etme

Son Düşünceler

Pranay Kapgate

Yorumlar