Bu kütüphane, tarayıcının localStorage özelliğini daha akıllı ve güvenli bir şekilde kullanmanızı sağlar. Standart localStorage yalnızca düz metin (string) saklayabilirken, bu kütüphane nesne (object), dizi (array), sayı ve boolean gibi veri tiplerini otomatik olarak dönüştürerek kaydeder ve okur.
Bu script direkt olarak kurulamaz. Başka scriptler için bir kütüphanedir ve meta yönergeleri içerir // @require https://update.greasyfork.org/scripts/591381/1902888/LS%20%28Local%20Storage%29.js
Bu kütüphane, tarayıcının localStorage özelliğini daha akıllı ve güvenli bir şekilde kullanmanızı sağlar. Standart localStorage yalnızca düz metin (string) saklayabilirken, bu kütüphane nesne (object), dizi (array), sayı ve boolean gibi veri tiplerini otomatik olarak dönüştürerek kaydeder ve okur.
Kütüphane UMD yapısında olduğu için projenizin mimarisine göre otomatik olarak uyum sağlar.
Kodu bir JavaScript dosyası olarak (örneğin ls.js) kaydedip HTML sayfanıza eklediğinizde, kütüphaneye küresel LS nesnesi üzerinden erişebilirsiniz:
<script src="ls.js"></script>
<script>
// Kütüphane hazır!
LS.set('selam', 'Dünya');
</script>
Modül sistemini kullanan projelerinizde kütüphaneyi require veya import ile projenize dahil edebilirsiniz:
// CommonJS ile dahil etme
const LS = require('./ls.js');
// ES6 Modül sistemi ile dahil etme (Derleyiciniz destekliyorsa)
// import LS from './ls.js';
LS.set)Verileri otomatik olarak JSON formatına çevirerek localStorage üzerine yazar. Dizi veya nesneleri elle JSON.stringify yapmanıza gerek kalmaz.
// 1. Basit metin kaydetme
LS.set('kullanici_adi', 'Ahmet123');
// 2. Nesne (Object) kaydetme
const profil = { id: 1, isim: 'Ahmet', rol: 'Admin' };
LS.set('kullanici_profili', profil);
// 3. Dizi (Array) kaydetme
const sepet = ['Elma', 'Armut', 'Muz'];
LS.set('alisveris_sepeti', sepet);
// 4. Sayı veya Boolean kaydetme
LS.set('oturum_acik_mi', true);
LS.set('giris_sayisi', 5);
LS.get)Belirtilen anahtardaki veriyi çeker. Eğer veri bir JSON nesnesi veya dizisiyse, otomatik olarak orijinal veri tipine (Object, Array, Boolean vb.) dönüştürür.
// 1. Nesne okuma (Otomatik olarak Object tipine dönüşür)
const aktifProfil = LS.get('kullanici_profili');
console.log(aktifProfil.isim); // Çıktı: Ahmet
// 2. Dizi okuma (Otomatik olarak Array tipine dönüşür)
const sepetim = LS.get('alisveris_sepeti');
console.log(sepetim.length); // Çıktı: 3
// 3. Olmayan bir veriyi okuma denemesi
const veriYok = LS.get('olmayan_anahtar');
console.log(veriYok); // Çıktı: null
LS.remove)Sadece belirtilen anahtara ait veriyi localStorage üzerinden kaldırır.
// Alışveriş sepetini siler, diğer verilere dokunmaz
LS.remove('alisveris_sepeti');
LS.clear)Tarayıcıda o siteye ait olan tüm localStorage verilerini tek seferde siler.
// Tüm local storage geçmişini sıfırlar
LS.clear();
Aşağıdaki örnekte tüm fonksiyonların bir arada kullanımını görebilirsiniz:
// 1. Kullanıcı giriş yaptı, bilgilerini kaydedelim
LS.set('user', { name: 'Can', premium: true });
LS.set('theme', 'dark');
// 2. Sayfa yenilendi veya başka bir aşamaya geçildi, bilgileri kontrol edelim
const user = LS.get('user');
if (user && user.premium) {
console.log(`Hoş geldin Premium Üye: ${user.name}`);
}
// 3. Kullanıcı tema tercihini değiştirmek istedi, eskiyi silip yenisini yapalım
LS.remove('theme');
LS.set('theme', 'light');
// 4. Kullanıcı güvenli çıkış yaptı, her şeyi temizleyelim
LS.clear();