JavaScript LocalStorage Kullanımı

Herkese çok çok selamlar arkadaşlar artık aktif tutacağımı söylemiştim ve şuan yeni bir konu ile sizlerleyim. Bu konumuzda Javascript local storage kullanımının nasıl olduğunu anlatacağım.

Öncelikle localstorage() nedir ona bir bakalım 🙂

LocalStorage Html5 bile hazır olarak gelen ve javascript ile birlikte kullanılan bir depolama yöntemidir. COOKIE ye çok benzemektedir ama bana göre daha hızlı ve oldukça pratik bir yapıdır.

Peki bu local storage yapısını nerelerde kullanırız bize nerelerde lazım olur ona bir göz atalım bir kaç örnek verelim 🙂 Hadi gelin JavaScript LocalStorage Kullanımına bir bakalım.

🔸 Bir iletişim formunuz var ve bu formda birden çok alan var bir ziyaretçi bu formu doldurduğu esnada yanlışlıkla sekme kapanır veya sayfa yenilenirse yazdığı verilerin silinmemesi için kullanabilirsiniz.

🔸 Veya daha gelişmiş bir formunuz var örneğin kariyer sitelerindeki gibi CV hazırlama çok uzun bir formunuz var düşünsenize bu formdaki verilerin sayfa yenilendiğinde gittiğini 😃Bu gibi yerlerde hayat kurtarır.

🔸 Çoktan seçmeli kutucuklarınız var checkbox işlemleriniz var diyelim ki seçilenlerin hafızada kalması için kullanabilirsiniz.
Vb. Bir çok yerde projenize ve mantığınıza uygun yerlerde kullanabilirsiniz.

JavaScript LocalStorage Kullanımı Nasıldır?

Kullanımı için ilk önce projemize jQuery kütüphanesini dahil etmeliyiz.

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

localStorage.setItem() İşlemi

Local Storage’a veri eklemek için localStorage nesnesinin setItem() metodu kullanılır. Çerezlerde olduğu gibi yine key-value tanımlaması geçerlidir.

localStorage.setItem("isim","Yavuz Selim");

key: Değerin hangi isimle depolanacağını belirtir.

value: Depolanacak değeri belirtir.

isim” değişkenine “Yavuz Selim” değerini atayıp veriyi depolar. Depolanan veri bilgisayarda tutulur. Tarayıcılar sayesinde hangi verilerin depolandığını görmek mümkündür. Örneğin; Chrome ile “Öğeyi Denetle” seçeneğinden “Resources” sekmesine girip, soldaki menüden Local Storage’a tıklandığında hangi sitede hangi verilerin depolandığı karşınıza gelecektir.

localStorage.getItem() İşlemi

Geldik get işlemine. Sonuçta verilerimizi set ettik artık bu verilerimize ulaşıp istediğimiz yerde kullanacağız ya da ekrana yazdıracağız. Evet gelelim get item kullanışına set ederken gönderdiğimiz key adına göre verilerimizi çekeceğiz.

var data = localStorage.getItem("isim");    // VERİYİ GETİRELİM
console.log("Gelen Veri: "+data);    // VERİYİ EKRANA YAZDIRALIM

Gördüğümüz üzere isim adında set ettiğimiz değeri ekrana yazdırdık ve karşılığında verdiğimiz Yavuz Selim içeriği ekrana yazdırıldı.

localStorage.removeItem() İşlemi

Adından da anlaşılacağı üzere localstorage yani lokal depolamadan verimizi silmek için remove item kullanılır. Yine aynı şekilde key değerine göre silme işlemini yaparız.

localStorage.removeItem("isim");

isim olarak set ettiğimiz değeri lokal depolamadan siliyoruz ve artık ekrana yazdırsak bile gelmeyecektir.

localStorage.clear() İşlemi

Lokal depolamadan şart belirtmeden tüm verileri silmek istiyorsak clear işlemi kullanılır. Tüm set edilmiş değerleri toplu olarak silecektir.

localStorage.clear();

Evet arkadaşlar güzel bir konu ile sizlerle olduk. Umarım bu konu sizler için faydalı olur ve projelerinizde kolaylık olur.

Web yazılım konusundaki hizmetimin detayını görüntülemek için tıklayınız.

Sonraki konuda görüşmek üzere
Kanalıma abone olmayı unutmayın 🙂..

JavaScript LocalStorage Kullanımı