Brauzerda ma'lumot saqlash

localStorage va sessionStorage

localStorage va sessionStorage — brauzerda kalit-qiymat (key/value) ko'rinishida ma'lumot saqlash uchun ob'yektlardir. Ular cookie'dan farqli o'laroq serverga yuborilmaydi, ancha katta hajmga (odatda ~5 MB) ega va foydalanish uchun ancha qulay. Ularni birgalikda Web Storage deb ataladi.

Web Storage nima

Ikkala ob'yekt ham bir xil metod va xususiyatlarga ega. Farqi — ma'lumot qancha vaqt saqlanishida va qaysi oynalar orasida ulashilishida:

Web Storage brauzerga xos. Node.js yoki playground muhitida localStorage mavjud emas, shu sabab bu misollarni brauzer konsolida sinang.

Asosiy metodlar

Web Storage quyidagi metod va xususiyatlarni beradi (misolda localStorage, lekin sessionStorage aynan bir xil):

// Brauzerda:
localStorage.setItem('user', 'Ali');
console.log(localStorage.getItem('user')); // "Ali"

localStorage.removeItem('user');
console.log(localStorage.getItem('user')); // null

localStorage.setItem('a', '1');
localStorage.setItem('b', '2');
localStorage.clear();
console.log(localStorage.length); // 0
Mavjud bo'lmagan kalit uchun getItem null qaytaradi (cookie'dagi undefineddan farqli).

Obyekt kabi murojaat

Web Storage'ga oddiy obyekt kabi ham murojaat qilish mumkin — nuqta yoki kvadrat qavs orqali:

// bular ishlaydi, lekin tavsiya etilmaydi:
localStorage.user = 'Ali';
console.log(localStorage.user); // "Ali"
delete localStorage.user;
Obyekt sintaksisi qulay ko'rinsa-da, metodlardan foydalanish tavsiya etiladi. Sabab: agar kalit length, setItem kabi ichki nom bilan to'qnashsa, xatti-harakat buziladi. setItem/getItem esa har doim ishonchli ishlaydi.

Faqat satr saqlanadi

Web Storage'da faqat satr (string) saqlash mumkin. Kalit ham, qiymat ham satr bo'lishi shart. Boshqa turdagi qiymat berilsa, u avtomatik satrga aylantiriladi, bu ko'pincha kutilmagan natija beradi:

localStorage.setItem('num', 123);
console.log(localStorage.getItem('num')); // "123" (satr!)
console.log(typeof localStorage.getItem('num')); // "string"

localStorage.setItem('obj', { a: 1 });
console.log(localStorage.getItem('obj')); // "[object Object]" — buzilgan!
Obyektni to'g'ridan-to'g'ri saqlashga urinish [object Object] satriga aylantiradi — ma'lumot yo'qoladi. Obyektlarni doim JSON orqali saqlang (keyingi bo'lim).

Obyektlarni JSON orqali saqlash

Obyekt yoki massiv saqlash uchun ularni JSON.stringify bilan satrga, o'qishda esa JSON.parse bilan qayta obyektga aylantiramiz:

let user = { name: 'Ali', age: 25, roles: ['admin', 'user'] };

// saqlash:
localStorage.setItem('user', JSON.stringify(user));

// o'qish:
let stored = JSON.parse(localStorage.getItem('user'));
console.log(stored.name); // "Ali"
console.log(stored.roles[0]); // "admin"

Xavfsiz o'qish uchun null holatini hisobga olgan yordamchi funksiya foydali:

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

function loadJSON(key) {
  let raw = localStorage.getItem(key);
  return raw === null ? null : JSON.parse(raw);
}

saveJSON('settings', { theme: 'dark', lang: 'uz' });
let s = loadJSON('settings');
console.log(s.theme); // "dark"
JSON.parse noto'g'ri formatdagi satr uchun xatolik tashlaydi. Ishonchsiz ma'lumotni o'qishda try...catch ishlatish yoki loadJSONni himoyalash foydali.

Kalitlar bo'yicha aylanish

Web Storage — iterable emas, ya'ni uni to'g'ridan-to'g'ri for..of bilan aylantirib bo'lmaydi. Barcha kalitlarni ko'rish uchun length va key(i) ishlatiladi:

// barcha juftliklarni chiqarish:
for (let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i);
  console.log(key + ' = ' + localStorage.getItem(key));
}

Yoki barcha kalitlarni bir vaqtda olish uchun Object.keys ishlatish mumkin — bu faqat o'z (own) kalitlarni beradi, ichki metodlarni chetlab o'tadi:

let keys = Object.keys(localStorage);
for (let key of keys) {
  console.log(key + ' = ' + localStorage.getItem(key));
}
for..in tsiklini ishlatmang — u setItem, length kabi ichki maydonlarni ham aylantirib chiqadi. Object.keys yoki key(i) usuli xavfsizroq.

storage hodisasi

localStorage yoki sessionStorage o'zgarganda storage hodisasi ishga tushadi. Muhim jihat: bu hodisa o'zgarishni amalga oshirgan oynada emas, boshqa oynalarda ishlaydi. Bu bir domenning turli tab'lari orasida ma'lumot almashishga imkon beradi:

// Brauzerda, bir tab'da:
window.addEventListener('storage', function(event) {
  console.log('Kalit: ' + event.key);
  console.log('Eski qiymat: ' + event.oldValue);
  console.log('Yangi qiymat: ' + event.newValue);
  console.log('URL: ' + event.url);
  console.log('Storage: ', event.storageArea);
});

// boshqa tab'da:
// localStorage.setItem('user', 'Vali');
// yuqoridagi handler birinchi tab'da ishga tushadi

event ob'yektining foydali xususiyatlari:

storage hodisasi tab'lar orasida oddiy "xabar almashish" mexanizmi sifatida ishlatilishi mumkin: bir tab localStoragega yozadi, boshqalari hodisa orqali xabar oladi.

localStorage va sessionStorage farqi

Ikkalasining amaliy farqlari quyidagicha:

Doimiy sozlamalar (masalan interfeys mavzusi) uchun localStorage, vaqtinchalik forma holatini bitta tab uchun saqlashda esa sessionStorage mos keladi.

Cheklovlar

Xulosa