JavaScript localStorage Kullanımı

Verileri saklamak önemlidir. Bunları farklı yerlerde saklayabiliriz. Eğer arayüz geliştiricisiysek tarayıcı üzerinde de veri saklayabiliriz.

JavaScript localStorage Nedir?

JavaScript ile verileri tarayıcı üzerinde saklamak için kullanılan bir nesnedir. Veriler tarayıcı üzerinde saklanır ve veriyi oluşturan url / adres ile ilişkilendirilir. Bu işlemi yapan JavaScript localStorage nesnesidir.

Veriler tarayıcı üzerinde olduğu için güvenli bir saklama yöntemi değildir. Güvenlik zaafiyeti olacak verilerin burada saklanması uygun değildir. Ayrıca bu veriler kullanıcı tarafından da silinebilir durumdadır.

localStorage Nasıl Kullanılır?

localStorage bir nesnedir. setItem, setItem ve clear metodları bulunur.

Bir değişkeni localStorage üzerine kayıt etmek için setItem metodunu kullanırız. Değişken adını ve değerini parametre olarak alır.

let uyeAdi = 'demir';

localStorage.setItem("uyeAdi", uyeAdi);

// Tarayıcı üzerine uyeAdı olarak
// değişkeni kayıt eder.

Kayıt edilen değişkenler, tarayıcının geliştirme konsolu altıdan uygulama / aplication menüsü aldıntaki localStorage alanında görülebilir.

Bir değişkeni localStorage üzerinden almak için getItem metodu kullanılır. Parametre olarak değişken adını alır.

let uyeAdi = localStorage("uyeAdi");

console.log(uyeAdi);

// Konsola
// demir
// yazdırır. Çünkü daha önce 
// uyeAdi olarak demir
// kayıt etmiştik.

Yine localStorage üzerine kayıt edilmiş bir değişkene

localStorage.degiskenAdi

şeklinde de ulaşılabilinir.

Bir değişkeni localStorage üzerinden silmek için removeItem metodu kullanılabilir. Parametre olarak değişken adını alır.

localStorage.removeItem("uyeAdi");

Şeklinde kullanılır.

localStorage üzerinde kayıtlı olan tüm kayıtları ( o anki siteye ait) silmek için clear metodu kullanılabilir.

localStorage.clear();

Şeklinde kullanılır ve o an kullanılan siteye ait verileri localStorage üzerinden siler.

http ve https ile başlayan aynı domaine ait veriler farklı olarak algılanır. Bu nedenle bu ayrıma dikkat etmek gereklidir. http://orneksite.com ile https://orneksite.com adreslerinden gelecek olan kayıtlar farklı olacaktır.

LocalStorage Üzerine Nesne Nasıl Kayıt Edilir?

localStorage üzerine bir nesneyi olduğu gibi kayıt edemeyiz.

let uye = {
    isim: 'hasan',
    yas: 22
};

localStorage.setItem("uye", uye);

const kayitliUye = localStorage.getItem("uye");

console.log(kayitliUye);

// Konsola 
// [object Object]
// basılır.

Bu durumu aşmak için nesneyi kayıt etmeden önce JSON formatına çevirmemiz gerekiyor.

Bunun için

let uye = {
    isim: 'hasan',
    yas: 22
};

localStorage.setItem("uye", JSON.stringify(uye));
// uye adlı nesne JSON formatına
// çevrilerek localStorage üzerin
// kayıt edilir.

Bir nesne JSON formatında localStorage üzerine kayıt edildiğinde, onu geri okuduğumuzda da JSON formatında olacaktır. Bu nedenle nesneyi kullanabilmek için JSON.parse etmemiz gereklidir.

let kayitliUye = JSON.parse(localStorage("uye"));

console.log(kayitliUye);
// Konsola
// {isim: 'hasan', yas: 22}
// yazdırır. Geri dönen bilgi
// tekrar nesneye çevrimiş olur.

Kısaca özetlersek, eğer bir nesneyi localStorage üzerine kayıt etmek istiyorsak, önce onu JSON formatına çevirmemiz gerekiyor. Bunun için JSON.stringify metodunu kullanıyoruz.

JSON formatı ile kayıt edilen nesneyi tekrar kullanmak için ise okuduktan sonra kullanmak için tekrar nesneye çevirmemiz gerekiyor. Bunun için ise JSON.parse metodunu kullanıyoruz.

Sonuç

Veriler değerlidir ve kaybetmemek için bir yerlere kayıt etmek gerekir. Eğer tarayıcı üzerinde çalışan bir uygulamamız varsa, önemsiz küçük verileri tarayıcı üzerine tutabiliriz. Bunun için ise JavaScript bize localStorage nesnesini veriyor.

Eklemek istediklerinizi ve sorularınız yorumlardan bize iletebilirsiniz.