localStorage mekanizması, tarayıcıda veri depolamanıza ve almanıza izin veren bir tür web depolama nesnesi sağlar. Verileri sona ermeden 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 nasıl 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 String biçiminde olmalıdır.

Nesneleri veya dizileri depolamak istiyorsanız, bunları kullanarak dizelere dönüştürmeniz gerekir. JSON.stringify() yöntem. localStorage'da 5 MB'a kadar veri depolayabilirsiniz. Ayrıca, aynı kaynağa sahip tüm pencereler, o sitenin localStorage verilerini paylaşabilir.

instagram viewer

Bir tarayıcı, bir kullanıcı kapatsa bile bu verileri silmez. Gelecekteki herhangi bir oturumda onu oluşturan web sitesinde mevcut olacaktır. Ancak, aynı sayfada çalışan diğer komut dosyaları buna erişebildiğinden hassas veriler için localStorage kullanmamalısınız.

localStorage vs. oturumDepolama

bu localStorage ve sessionStorage nesneler, anahtar/değer çiftlerini yerel olarak depolayan Web Depolama API'sinin bir 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 bir sayfa oturumu sona erer.

Bu projede kullanılan kod bir GitHub deposu ve MIT lisansı altında kullanmanız için ücretsizdir. Skor sayacı projesinin canlı versiyonuna göz atmak isterseniz, canlı yayına göz atabilirsiniz. demo.

localStorage Nasıl Çalışır?

localStorage işlevine şuradan erişebilirsiniz: Window.localStorage Emlak. Bu özellik setItem(), getItem() ve removeItem() gibi birkaç yöntem sağlar. Bunları anahtar/değer çiftlerini saklamak, okumak ve silmek için kullanabilirsiniz.

LocalStorage'da Veriler Nasıl Depolanır?

Verileri kullanarak localStorage'da depolayabilirsiniz. setItem() yöntem. 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('piton', 'Guido van Rossum');

Burada, piton anahtardır ve Guido van Rossum değerdir. Bir diziyi veya nesneyi saklamak istiyorsanız, onu bir dizgeye dönüştürmeniz gerekecektir. kullanarak bir diziyi veya nesneyi bir dizeye dönüştürebilirsiniz. JSON.stringify() yöntem.

pencere.localStorage.setItem('Python', 'Guido van Rossum');
const öğrenci = {
 isim: "Yuvraj",
 işaretler: 85,
 konu: "Makine Öğrenimi"
}
const puanlar = [76, 77, 34, 67, 88];
pencere.localStorage.setItem('sonuç', JSON.stringify (öğrenci));
pencere.localStorage.setItem('işaretler', JSON.stringify (skorlar));

localStorage'dan Veri Nasıl Okunur

kullanarak localStorage'dan veri okuyabilirsiniz. getItem() yöntem. Bu yöntem, anahtarı parametre olarak kabul eder ve değeri bir dize olarak döndürür.

İzin Vermek veri1 = pencere.localStorage.getItem('Python');
İzin Vermek veri2 = pencere.localStorage.getItem('sonuç');
konsol.log (veri1);
konsol.log (veri2);

Bu, aşağıdaki çıktıyı üretir:

Guido van Rossum
{"isim":"Yuvraj","işaretler":85,"ders":"Makine öğrenme"}

Sonucu bir dizgeden bir nesneye dönüştürmek istiyorsanız, JSON.parse() yöntem.

İzin Vermek veri2 = JSON.parse(pencere.localStorage.getItem('sonuç'));
konsol.log (veri2);

localStorage Oturumları Nasıl Silinir

kullanarak localStorage oturumlarını silebilirsiniz. öğeyi kaldırmak() yöntem. Anahtar/değer çiftini silmek için anahtarı bu yönteme parametre olarak iletmeniz gerekir. Anahtar varsa, yöntem anahtar/değer çiftini siler ve anahtar yoksa yöntem hiçbir şey yapmaz.

window.localStorage.removeItem('piton');
window.localStorage.removeItem('C++');

localStorage'daki Tüm Öğeler Nasıl Temizlenir

kullanarak yerel depolamadaki tüm öğeleri temizleyebilirsiniz. açık() yöntem. Bu metoda herhangi bir parametre iletmenize gerek yoktur.

pencere.yerel depolama.açık();

localStorage'ın Uzunluğu Nasıl Bulunur?

kullanarak localStorage uzunluğunu bulabilirsiniz. localStorage.length Emlak.

İzin Vermek len = localStorage.length;
konsol.log (uzunluk);

Belirli Bir Konumda Anahtar Nasıl Alınır

Anahtarı kullanarak belirli bir konumda anahtarı alabilirsiniz. anahtar() yöntem. Bu yöntem, dizini parametre olarak kabul eder.

İzin Vermek d = localStorage.key(1);
konsol.log (d);

key() yöntemi, öncelikle localStorage'daki tüm öğeler arasında dolaşmak için kullanılır.

localStorage'daki Tüm Öğelerde Nasıl Döngü Yapılır?

Bir for döngüsü kullanarak localStorage'daki tüm öğeleri yineleyebilirsiniz.

için (İzin Vermek ben = 0; i < localStorage.length; ben++){
İzin Vermek anahtar = localStorage.key (i);
İzin Vermek değer = localStorage.getItem (anahtar);
konsol.log (anahtar, değer);
}

key() yöntemi, dizini argüman olarak kabul eder ve karşılık gelen anahtarı döndürür. getItem() yöntemi, anahtarı argüman olarak kabul eder ve karşılık gelen değeri döndürür. Son olarak, konsol.log() yöntem, anahtar/değer çiftini yazdırır.

localStorage'a Dayalı Basit JavaScript Projesi

Temel yöntemlerini anlayarak geliştirebilirsiniz basit bir JavaScript projesi localStorage'a dayalıdır. 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.

Oluşturduğunuz bir index.html ve script.js dosyasını yeni bir klasörde açın ve dosyaları favori kod düzenleyicinizde açın. Puan sayacı uygulaması için bir arayüz oluşturmak üzere aşağıdaki HTML kodunu kullanın:

<!DOCTYPE html>
<html>
<gövde>
<h1>JavaScript'te localStorage</h1>
<düğme onclick="artışSayacı()" tip="buton">Puanı Arttır</button>
<düğme onclick="azalmaSayacı()" tip="buton">Puanı Düşür</button>
<düğme onclick="clearCounter()" tip="buton">LocalStorage'ı temizle</button>
<p>Skor:</p>
<p kimliği="Puan"></p>
<p>Tıkla "Puanı Arttır" puan sayısını artırmak için düğme</p>
<p>Tıkla "Puanı Düşür" puan sayısını azaltmak için düğme</p>
<p>Tıkla "LocalStorage'ı temizle" localStorage'ı temizlemek için düğme</p>
<p>
 Tarayıcı sekmesini kapatabilirsiniz (veya pencere), ve denemek Yeniden.
 Verilerin hala devam ettiğini göreceksiniz vedır-dirolumsuzluk kapattıktan sonra bile kayıp
 tarayıcı.
</p>
<komut dosyası kaynağı="script.js"></script>
</body>
</html>

Bu sayfa üç düğme içerir: Puanı Arttır, Puanı Düşür, ve LocalStorage'ı temizle. Bu düğmeler çağrı artışSayacı(), azalmaSayacı(), ve clearCounter() sırasıyla işlevler. JavaScript kullanarak puan sayacı uygulamasına işlevsellik eklemek için aşağıdaki kodu kullanın.

işlevartışSayaç() {
var say = Sayı(pencere.localStorage.getItem("sayım"));
 say += 1;
 window.localStorage.setItem("saymak", saymak);
 document.getElementById("Puan".innerHTML = sayı;
}

bu artışSayacı() işlevi, getItem() yöntemini kullanarak sayımı alır. getItem() bir dize döndürdüğünden ve onu sayım değişkeninde sakladığı için sonucu bir Sayıya dönüştürür.

İlk kez tıkladığınızda Puanı Arttır düğmesi, herhangi bir setItem() çağrısından önce olacaktır. Tarayıcınız saymak localStorage'da anahtar, böylece boş bir değer döndürür. Number() işlevi boş bir girdi için 0 döndürdüğünden, herhangi bir özel durum işlemesi gerekmez. Kod, saklamadan ve belgeyi yeni değeri gösterecek şekilde güncellemeden önce sayım değerini güvenle artırabilir.

işlevazalmaSayaç() {
var say = Sayı(pencere.localStorage.getItem("sayım"));
 say -= 1;
 window.localStorage.setItem("saymak", saymak);
 document.getElementById("Puan".innerHTML = sayı;
}

bu azalmaSayacı() işlev verileri alır ve kontrol eder tıpkı artışSayacı() yapmak. azaltır saymak 1 ile değişken, varsayılan olarak 0'dır.

işlevtemizleSayaç() {
pencere.yerel depolama.açık();
 document.getElementById("Puan".innerHTML = "";
}

Son olarak, clearCounter() işlevi kullanarak localStorage'daki tüm verileri siler. açık() yöntem.

localStorage ile Daha Fazlasını Yapın

localStorage nesnesinin setItem(), getItem(), removeItem() ve clear() dahil olmak üzere birkaç yöntemi vardır. localStorage'ın kullanımı kolay olsa da hassas bilgileri saklamak güvenli değildir. Ancak fazla depolama gerektirmeyen ve hassas bilgiler içermeyen projeler geliştirmek için iyi bir seçimdir.

Başka bir localStorage tabanlı JavaScript projesi mi oluşturmak istiyorsunuz? İşte HTML, CSS ve JavaScript kullanarak geliştirebileceğiniz basit bir yapılacaklar listesi uygulaması.