LS (Local Storage)

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.

Ten skrypt nie powinien być instalowany bezpośrednio. Jest to biblioteka dla innych skyptów do włączenia dyrektywą meta // @require https://update.greasyfork.org/scripts/591381/1902888/LS%20%28Local%20Storage%29.js

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Greasemonkey lub Violentmonkey.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana będzie instalacja rozszerzenia Tampermonkey lub Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

Aby zainstalować ten skrypt, musisz zainstalować rozszerzenie menedżera skryptów użytkownika.

(Mam już menedżera skryptów użytkownika, pozwól mi to zainstalować!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Musisz zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

(Mam już menedżera stylów użytkownika, pozwól mi to zainstalować!)

Autor
Türk-Atilla
Wersja
1
Utworzono
14-08-2026
Zaktualizowano
14-08-2026
Rozmiar
1,93 KB
Licencja
MIT

LS (LocalStorage) Yardımcı Kütüphanesi Kullanım Kılavuzu

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.


🚀 Kurulum ve Entegrasyon

Kütüphane UMD yapısında olduğu için projenizin mimarisine göre otomatik olarak uyum sağlar.

1. Tarayıcıda Doğrudan Kullanım (HTML)

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>

2. Modern JavaScript Projelerinde (Webpack, Vite, Node.js, React, Vue vb.)

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';

🛠️ Fonksiyonlar ve Örnek Kullanımlar

1. Veri Kaydetme (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);

2. Veri Okuma (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

3. Belirli Bir Veriyi Silme (LS.remove)

Sadece belirtilen anahtara ait veriyi localStorage üzerinden kaldırır.

// Alışveriş sepetini siler, diğer verilere dokunmaz
LS.remove('alisveris_sepeti');

4. Tüm Depolama Alanını Temizleme (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();

💡 Tam Bir Senaryo Örneği

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();