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.

이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @require https://update.greasyfork.org/scripts/591381/1902888/LS%20%28Local%20Storage%29.js을(를) 사용하여 포함하는 라이브러리입니다.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

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

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

작성자
Türk-Atilla
버전
1
생성일
2026-08-14
갱신일
2026-08-14
크기
1.93KB
라이선스
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();