localStorage mekanizması, tarayıcıda veri depolamanıza ve almanıza izin veren bir tür web depolama nesnesi sağlar. Verileri son kullanma tarihi olmadan saklayabilir ve bunlara erişebilirsiniz; veriler, bir ziyaretçi sitenizi kapattıktan sonra bile kullanılabilir olacaktır.
Normalde localStorage’a JavaScript kullanarak erişirsiniz. Az miktarda kodla puan sayacı gibi örnek bir proje oluşturabilirsiniz. Bu, yalnızca istemci tarafı kodunu kullanarak kalıcı verileri nasıl depolayabileceğinizi ve bunlara erişebileceğinizi gösterecektir.
JavaScript’te localStorage Nedir?
localStorage nesnesi, çoğu web tarayıcısının desteklediği web depolama API’sinin bir parçasıdır. localStorage kullanarak verileri anahtar/değer çiftleri olarak depolayabilirsiniz. Benzersiz anahtarlar ve değerler UTF-16 DOM Dizesi biçiminde olmalıdır.
Nesneleri veya dizileri depolamak istiyorsanız, bunları JSON.stringify() yöntemini kullanarak dizelere dönüştürmeniz gerekir. LocalStorage’da 5 MB’a kadar veri depolayabilirsiniz. Ayrıca, aynı kaynağa sahip tüm pencereler o sitenin localStorage verilerini paylaşabilir.
Bir tarayıcı, bir kullanıcı kapatsa bile bu verileri silmez. Gelecekteki herhangi bir oturum sırasında onu oluşturan web sitesinde mevcut olacaktır. Ancak, hassas veriler için localStorage kullanmamalısınız, çünkü aynı sayfada çalışan diğer komut dosyaları ona erişebilir.
localStorage ve sessionStorage karşılaştırması
localStorage ve sessionStorage nesneleri, anahtar/değer çiftlerini yerel olarak depolayan Web Depolama API’sinin parçasıdır. Tüm modern tarayıcılar her ikisini de destekler. localStorage ile, bir kullanıcı tarayıcısını kapattıktan sonra bile verilerin süresi dolmaz. Bu, sayfa oturumu sona erdiğinde verileri temizleyen sessionStorage’dan farklıdır. Bir sekmeyi veya pencereyi kapattığınızda sayfa oturumu sona erer.
Bu projede kullanılan kod bir GitHub deposunda mevcuttur ve MIT lisansı altında kullanmanız için ücretsizdir. Score counter projesinin canlı versiyonuna göz atmak isterseniz canlı demosuna göz atabilirsiniz .
localStorage Nasıl Çalışır?
LocalStorage işlevine Window.localStorage özelliği aracılığıyla erişebilirsiniz . Bu özellik, setItem(), getItem() ve removeItem() gibi çeşitli yöntemler sağlar. Anahtar/değer çiftlerini depolamak, okumak ve silmek için bunları kullanabilirsiniz.
Veriler localStorage’da Nasıl Saklanır?
setItem() yöntemini kullanarak verileri localStorage’da depolayabilirsiniz . Bu yöntem, anahtar ve karşılık gelen değer olmak üzere iki bağımsız değişkeni kabul eder.
window.localStorage.setItem(‘Python’, ‘Guido van Rossum’);
Burada Python anahtardır ve Guido van Rossum değerdir. Bir diziyi veya nesneyi saklamak istiyorsanız, onu bir dizgeye dönüştürmeniz gerekecektir. JSON.stringify() yöntemini kullanarak bir diziyi veya nesneyi dizeye dönüştürebilirsiniz .
window.localStorage.setItem(‘Python’, ‘Guido van Rossum’);
const student = {
name: “Yuvraj”,
marks: 85,
subject: “Machine Learning”
}
const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem(‘result’, JSON.stringify(student));
window.localStorage.setItem(‘marks’, JSON.stringify(scores));
LocalStorage’dan Veriler Nasıl Okunur?
getItem() yöntemini kullanarak localStorage’dan veri okuyabilirsiniz . Bu yöntem, anahtarı bir parametre olarak kabul eder ve değeri bir dize olarak döndürür.
let data1 = window.localStorage.getItem(‘Python’);
let data2 = window.localStorage.getItem(‘result’);
console.log(data1);
console.log(data2);
Bu, aşağıdaki çıktıyı üretir:
Guido van Rossum
{“name”:”Yuvraj”,”marks”:85,”subject”:”Machine Learning”}
Sonucu bir dizeden bir nesneye dönüştürmek istiyorsanız, JSON.parse() yöntemini kullanmalısınız.
let data2 = JSON.parse(window.localStorage.getItem(‘result’));
console.log(data2);
localStorage Oturumları Nasıl Silinir?
removeItem() yöntemini kullanarak localStorage oturumlarını silebilirsiniz . Anahtar-değer çiftini silmek için anahtarı parametre olarak bu yönteme iletmeniz gerekir. Anahtar varsa, yöntem anahtar-değer çiftini siler ve anahtar yoksa yöntem hiçbir şey yapmaz.
window.localStorage.removeItem(‘Python’);
window.localStorage.removeItem(‘C++’);
LocalStorage’daki Tüm Öğeler Nasıl Temizlenir
clear() yöntemini kullanarak yerel depolamadaki tüm öğeleri temizleyebilirsiniz. Bu metoda herhangi bir parametre iletmeniz gerekmez.
window.localStorage.clear();
localStorage Uzunluğu Nasıl Bulunur?
localStorage.length özelliğini kullanarak localStorage’ın uzunluğunu bulabilirsiniz .
let len = localStorage.length;
console.log(len);
Belirli Bir Pozisyonda Anahtar Nasıl Elde Edilir
key() yöntemini kullanarak anahtarı belirli bir konuma getirebilirsiniz . Bu metot indeksi parametre olarak kabul eder.
let d = localStorage.key(1);
console.log(d);
key() yöntemi öncelikle localStorage’daki tüm öğeler arasında döngü oluşturmak için kullanılır.
LocalStorage’daki Tüm Öğeler Arasında Nasıl Döngü Yapılır?
Bir for döngüsü kullanarak localStorage’daki tüm öğeleri yineleyebilirsiniz.
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(key, value);
}
key() yöntemi, dizini bir bağımsız değişken olarak kabul eder ve karşılık gelen anahtarı döndürür. getItem() yöntemi, anahtarı bağımsız değişken olarak kabul eder ve karşılık gelen değeri döndürür. Son olarak, console.log() yöntemi, anahtar/değer çiftini yazdırır.
localStorage Tabanlı Basit JavaScript Projesi
Temel yöntemlerini anlayarak, localStorage tabanlı basit bir JavaScript projesi geliştirebilirsiniz. Bu projede, bir düğme tıklamasına göre puan sayısını artıracak ve azaltacak bir puan sayacı uygulaması oluşturacaksınız. Ayrıca, localStorage’daki tüm öğeleri temizlemek için işlevsellik uygulayacaksınız.
Yeni bir klasörde bir index.html ve script.js dosyası oluşturun ve dosyaları favori kod düzenleyicinizde açın. Skor sayacı uygulaması için bir arayüz oluşturmak üzere aşağıdaki HTML kodunu kullanın:
<!DOCTYPE html>
<html>
<body>
<h1>localStorage in JavaScript</h1>
<button onclick=”increaseCounter()” type=”button”>Increase Score</button>
<button onclick=”decreaseCounter()” type=”button”>Decrease Score</button>
<button onclick=”clearCounter()” type=”button”>Clear localStorage</button>
<p>Score:</p>
<p id=”score”></p>
<p>Click on the “Increase Score” button to increase the score count</p>
<p>Click on the “Decrease Score” button to decrease the score count</p>
<p>Click on the “Clear localStorage” button to clear the localStorage</p>
<p>
You can close the browser tab (or window), and try again.
You’ll see that the data still persists and is not lost even after closing
the browser.
</p>
<script src=”script.js”> </script>
</body>
</html>
Bu sayfa üç düğme içerir: Puanı Artır , Puanı Azalt ve localStorage’ı Temizle . Bu butonlar sırasıyla boostCounter( ) , reduceCounter( ) ve clearCounter() fonksiyonlarını çağırır. JavaScript kullanarak puan sayacı uygulamasına işlevsellik eklemek için aşağıdaki kodu kullanın.
function increaseCounter() {
var count = Number(window.localStorage.getItem(“count”));
count += 1;
window.localStorage.setItem(“count”, count);
document.getElementById(“score”).innerHTML = count;
}
boostCounter ( ) işlevi, getItem() yöntemini kullanarak sayımı alır. getItem() bir dizge döndürdüğü ve bunu count değişkeninde sakladığı için sonucu bir Sayıya dönüştürür.
Puanı Artır düğmesine ilk tıkladığınız zaman, herhangi bir setItem() çağrısından önce olacaktır. Tarayıcınız, localStorage’da sayım anahtarını bulamayacak , dolayısıyla boş bir değer döndürecektir. Number() işlevi boş bir girdi için 0 döndürdüğünden, herhangi bir özel durum işlemeye ihtiyaç duymaz. Kod, saklamadan ve belgeyi yeni değeri gösterecek şekilde güncellemeden önce sayım değerini güvenle artırabilir.
function decreaseCounter() {
var count = Number(window.localStorage.getItem(“count”));
count -= 1;
window.localStorage.setItem(“count”, count);
document.getElementById(“score”).innerHTML = count;
}
reduceCounter () işlevi, tıpkı gainCounter()’ ın yaptığı gibi verileri alır ve kontrol eder . Count değişkenini, varsayılan olarak 0 olan 1 azaltır .
function clearCounter() {
window.localStorage.clear();
document.getElementById(“score”).innerHTML = “”;
}
Son olarak, clearCounter() işlevi clear() yöntemini kullanarak localStorage’daki tüm verileri siler .
localStorage İle Daha Fazlasını Yapın
localStorage nesnesi, setItem(), getItem(), removeItem() ve clear() gibi çeşitli yöntemlere sahiptir. localStorage’ın kullanımı kolay olsa da hassas bilgileri depolamak güvenli değildir. Ancak çok fazla depolama gerektirmeyen ve hassas bilgiler içermeyen projeler geliştirmek için iyi bir seçimdir.
Başka bir localStorage tabanlı JavaScript projesi oluşturmak ister misiniz? İşte HTML, CSS ve JavaScript kullanarak geliştirebileceğiniz basit bir yapılacaklar listesi uygulaması.