JavaScript Local Storage va Session Storage. Web-ilovalar uchun ma'lumotlarni saqlash

JavaScript-da Local Storage va Session Storage-dan foydalanish bo'yicha batafsil qo'llanma, misollar va amaliy mashqlar bilan o'rganing

So'nggi yangilanish: 2024-12-29

Bugun biz web-ilovalar uchun juda muhim bo'lgan mavzu - Local Storage va Session Storage haqida batafsil o'rganamiz. Bu texnologiyalar foydalanuvchi ma'lumotlarini brauzerda saqlash imkonini beradi, bu esa ko'plab qulayliklar va imkoniyatlar yaratadi.

Local Storage va Session Storage nima?

Local Storage va Session Storage - bu Web Storage API-ning qismlari bo'lib, ular brauzerda ma'lumotlarni saqlash imkonini beradi. Ular cookie-larga o'xshaydi, lekin ko'proq ma'lumot saqlash imkoniyatiga ega va foydalanish uchun qulayroq.

Local Storage

Ma'lumotlarni muddat cheklovisiz saqlaydi
Brauzer yopilganda ham ma'lumotlar saqlanib qoladi
Bir xil domen uchun barcha oynalar/yorliqlar uchun umumiy

Session Storage

Ma'lumotlarni faqat joriy sessiya davomida saqlaydi
Brauzer oynasi/yorlig'i yopilganda ma'lumotlar o'chiriladi
Har bir oyna/yorliq uchun alohida

Local Storage-dan foydalanish

Local Storage-dan foydalanish juda oson. Quyidagi asosiy metodlar mavjud:

// Ma'lumot saqlash
localStorage.setItem('kalit', 'qiymat');

// Ma'lumotni olish
const qiymat = localStorage.getItem('kalit');

// Ma'lumotni o'chirish
localStorage.removeItem('kalit');

// Barcha ma'lumotlarni o'chirish
localStorage.clear();

Amaliy misol:

// Foydalanuvchi ismini saqlash
function saqlashIsm() {
  const ism = document.getElementById('ismKiritish').value;
  localStorage.setItem('foydalanuvchiIsmi', ism);
  console.log('Ism saqlandi');
}

// Saqlangan ismni olish
function olishIsm() {
  const saqlanganIsm = localStorage.getItem('foydalanuvchiIsmi');
  if (saqlanganIsm) {
    console.log('Saqlangan ism:', saqlanganIsm);
  } else {
    console.log('Saqlangan ism topilmadi');
  }
}

// Saqlangan ismni o'chirish
function ochirishIsm() {
  localStorage.removeItem('foydalanuvchiIsmi');
  console.log('Ism o\'chirildi');
}

Session Storage-dan foydalanish

Session Storage ham xuddi Local Storage kabi ishlaydi, faqat localStorage o'rniga sessionStorage ishlatiladi:

// Ma'lumot saqlash
sessionStorage.setItem('kalit', 'qiymat');

// Ma'lumotni olish
const qiymat = sessionStorage.getItem('kalit');

// Ma'lumotni o'chirish
sessionStorage.removeItem('kalit');

// Barcha ma'lumotlarni o'chirish
sessionStorage.clear();

Amaliy misol:

// Foydalanuvchi so'nggi harakatini saqlash
function saqlashHarakat(harakat) {
  sessionStorage.setItem('songgiHarakat', harakat);
  console.log('Harakat saqlandi');
}

// So'nggi harakatni olish
function olishSonggiHarakat() {
  const songgiHarakat = sessionStorage.getItem('songgiHarakat');
  if (songgiHarakat) {
    console.log('So\'nggi harakat:', songgiHarakat);
  } else {
    console.log('So\'nggi harakat topilmadi');
  }
}

// Sessiya tugaganda barcha ma'lumotlarni o'chirish
window.addEventListener('unload', function() {
  sessionStorage.clear();
});

Murakkab ma'lumotlarni saqlash

Local Storage va Session Storage faqat string tipidagi ma'lumotlarni saqlaydi. Murakkab obyektlarni saqlash uchun JSON-dan foydalanish kerak:

// Obyektni saqlash
const foydalanuvchi = {
  ism: 'Ali',
  yosh: 25,
  email: 'ali@example.com'
};
localStorage.setItem('foydalanuvchi', JSON.stringify(foydalanuvchi));

// Obyektni olish
const saqlanganFoydalanuvchi = JSON.parse(localStorage.getItem('foydalanuvchi'));
console.log(saqlanganFoydalanuvchi.ism); // 'Ali'

Local Storage va Session Storage-ning afzalliklari

Hajm: Cookie-larga nisbatan ko'proq ma'lumot saqlash imkoniyati (odatda 5-10 MB gacha).
Qulaylik: JavaScript-da foydalanish oson.
Tezlik: Ma'lumotlar server bilan almashilmaydi, shuning uchun tezroq ishlaydi.
Xavfsizlik: HTTPS protokoli orqali himoyalangan.

Cheklovlar va e'tibor berish kerak bo'lgan jihatlar

Xavfsizlik: Muhim ma'lumotlarni (parollar, bank ma'lumotlari) saqlamang.
Sinxronizatsiya: Local Storage turli qurilmalar o'rtasida sinxronlanmaydi.
Hajm cheklovi: Katta hajmdagi ma'lumotlar uchun mos emas.
Faqat string: Faqat string tipidagi ma'lumotlarni saqlaydi.

Amaliy misol: Mavzuni saqlash

Keling, web-saytning mavzusini (yorug'/qorong'u) saqlab qolish uchun Local Storage-dan foydalanamiz:

// Mavzuni o'zgartirish va saqlash
function ozgartirishMavzu(mavzu) {
  document.body.className = mavzu;
  localStorage.setItem('saytMavzusi', mavzu);
}

// Saqlangan mavzuni yuklash
function yuklashMavzu() {
  const saqlanganMavzu = localStorage.getItem('saytMavzusi');
  if (saqlanganMavzu) {
    document.body.className = saqlanganMavzu;
  }
}

// Sahifa yuklanganda mavzuni tekshirish
document.addEventListener('DOMContentLoaded', yuklashMavzu);

// Mavzuni o'zgartirish tugmalari
document.getElementById('yoruqMavzu').addEventListener('click', () => ozgartirishMavzu('yoruq'));
document.getElementById('qoronguMavzu').addEventListener('click', () => ozgartirishMavzu('qorongu'));

Bu misolda, foydalanuvchi tanlagan mavzu Local Storage-da saqlanadi va sahifa qayta yuklanganda ham saqlanib qoladi.

Tez-tez so'raladigan savollar (TSS)

S: Local Storage va Session Storage-dagi ma'lumotlar qachon o'chiriladi? J: Local Storage-dagi ma'lumotlar foydalanuvchi brauzer xotirasini tozalamaguncha saqlanadi. Session Storage-dagi ma'lumotlar esa brauzer oynasi yoki yorlig'i yopilganda o'chiriladi.
S: Local Storage va Session Storage-dan foydalanishda xavfsizlik masalalari bormi? J: Ha, ular XSS (Cross-Site Scripting) hujumlariga moyil bo'lishi mumkin. Shuning uchun muhim ma'lumotlarni saqlamaslik va kiritilgan ma'lumotlarni tekshirish muhim.
S: Local Storage va Session Storage-ning hajm cheklovi qanday? J: Bu brauzerga bog'liq, lekin odatda 5-10 MB atrofida.
S: Ular barcha brauzerlarda qo'llab-quvvatlanadimi? J: Ha, zamonaviy brauzerlarning deyarli barchasi ularni qo'llab-quvvatlaydi.
S: Ma'lumotlarni shifrlash kerakmi? J: Muhim ma'lumotlar uchun shifrlash tavsiya etiladi, lekin eng yaxshisi bunday ma'lumotlarni umuman saqlamaslik.
S: Local Storage va Session Storage o'rtasidagi asosiy farq nima? J: Local Storage uzoq muddatli saqlash uchun, Session Storage esa qisqa muddatli (faqat joriy sessiya uchun) saqlash uchun mo'ljallangan.
S: Ular cookie-lardan nimasi bilan farq qiladi? J: Ular ko'proq ma'lumot saqlash imkonini beradi va har bir so'rovda serverga yuborilmaydi.
S: Local Storage va Session Storage-ni tozalash mumkinmi? J: Ha, clear() metodi orqali barcha ma'lumotlarni, removeItem() orqali esa alohida elementlarni o'chirish mumkin.
S: Ular serverda saqlanadimi? J: Yo'q, ular faqat foydalanuvchining brauzerida saqlanadi.
S: Local Storage va Session Storage-dan qanday holatlarda foydalanish kerak? J: Ular foydalanuvchi sozlamalari, kichik ma'lumotlar to'plamlari, vaqtinchalik ma'lumotlarni saqlash uchun foydali. Muhim yoki maxfiy ma'lumotlar uchun emas.

Xulosa

Local Storage va Session Storage - bu zamonaviy web-ilovalar uchun juda foydali vositalar. Ular foydalanuvchi ma'lumotlarini saqlash, ilovaning ishlashini yaxshilash va foydalanuvchi tajribasini oshirish imkonini beradi. Biroq, ulardan foydalanishda xavfsizlik masalalariga e'tibor berish va to'g'ri foydalanish juda muhim.

Bu texnologiyalarni o'z loyihalaringizda qo'llash orqali, siz foydalanuvchilar uchun yanada qulay va samarali web-ilovalar yaratishingiz mumkin. Esda tuting, har qanday texnologiya kabi, Local Storage va Session Storage ham o'z o'rni va vazifasiga ega - ulardan to'g'ri foydalanish sizning web-ilovangizni yanada kuchliroq va foydalanuvchilarga do'stona qiladi.

Qo'shimcha manbalar

PreviousEvent Handling

NextCookies