Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

HTML Web Storage

HTML Web Storage API; cookie’lardan yaxshiroq.

ULASHISH

HTML Web Storage nima?

Web storage yordamida ilovalar ma’lumotlarni foydalanuvchining brauzerida mahalliy (lokal) saqlashi mumkin.

HTML5 dan oldin ilova ma’lumotlari cookie’larda saqlanishi va har bir server so‘roviga kiritilishi kerak edi. Web storage xavfsizroq va katta hajmdagi ma’lumotlar veb-sayt samaradorligiga ta’sir ko‘rsatmasdan mahalliy saqlanishi mumkin.

Cookie’lardan farqli ravishda, saqlash chegarasi ancha kattaroq (kamida 5MB) va ma’lumotlar hech qachon serverga uzatilmaydi.

Web storage har bir origin (domen va protokol) uchun alohidadir. Bitta origindagi barcha sahifalar bir xil ma’lumotlarni saqlashi va ularga kira oladi.

Web Storage API obyektlari

Web storage brauzerda ma’lumot saqlash uchun ikkita obyekt taqdim etadi:

  • window.localStorage - amal qilish muddati bo‘lmagan ma’lumotlarni saqlaydi (brauzer yopilganda ma’lumot yo‘qolmaydi)
  • window.sessionStorage - bitta sessiya uchun ma’lumot saqlaydi (brauzer yopilganda ma’lumot yo‘qoladi)

Brauzerlarda qo‘llab-quvvatlash

Jadvaldagi raqamlar Web Storage ni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini bildiradi.

API
localStorage 4.0 8.0 3.5 4.0 11.5
sessionStorage 4.0 8.0 3.5 4.0 11.5

Web Storage API qo‘llab-quvvatlanishini tekshirish

Web storage dan foydalanishdan oldin localStorage va sessionStorage uchun brauzer qo‘llab-quvvatlashini tez tekshirishimiz mumkin:

Misol

Test browser support:

<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
  x.innerHTML = "Your browser supports Web storage!";
} else {
  x.innerHTML = "Sorry, no Web storage support!";
}
</script>
O‘zingiz sinab ko‘ring »

localStorage obyekti

localStorage obyekti ma’lumotlarni muddatsiz saqlaydi. Brauzer yopilganda ham ma’lumot yo‘qolmaydi va ertasi kuni, haftada yoki yilda ham mavjud bo‘ladi.

Misol

Nom va qiymat juftliklarini saqlash va olish uchun localStorage dan foydalaning:

<script>
const x = document.getElementById("result");

if (typeof(Storage) !== "undefined") {
  // Store
  localStorage.setItem("lastname", "Smith");
  localStorage.setItem("bgcolor", "yellow");
  // Retrieve
  x.innerHTML = localStorage.getItem("lastname");
  x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
  x.innerHTML = "Sorry, no Web storage support!";
}
</script>
O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

  • Nom/ qiymat juftliklarini yaratish uchun localStorage.setItem() metodidan foydalaning
  • Saqlangan qiymatlarni olish uchun localStorage.getItem() metodidan foydalaning
  • "lastname" qiymatini oling va id="result" bo‘lgan elementga joylashtiring
  • "bgcolor" qiymatini oling va id="result" bo‘lgan elementning style backgroundColor xususiyatiga joylashtiring

"lastname" localStorage elementini o‘chirish sintaksisi quyidagicha:

localStorage.removeItem("lastname");

Eslatma: Nom/qiymat juftliklari har doim string sifatida saqlanadi. Zarur bo‘lganda ularni boshqa formatga o‘tkazishni unutmang!

localStorage bilan bosishlarni hisoblash

Quyidagi misol foydalanuvchi tugmani necha marta bosganini sanaydi. Bu kodda hisoblagichni oshirish uchun qiymat stringdan songa o‘tkaziladi:

Misol

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    x.innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)!";
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
}
</script>
O‘zingiz sinab ko‘ring »

sessionStorage obyekti

sessionStorage obyekti localStorage obyektiga teng, faqat u ma’lumotni faqat bitta sessiya uchun saqlaydi! Ma’lumot foydalanuvchi muayyan brauzer yopqichini (tab) yopganda o‘chiriladi.

sessionStorage yordamida bosishlar sonini hisoblash

Quyidagi misol foydalanuvchining joriy sessiyada tugmani necha marta bosganini sanaydi:

Misol

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    x.innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session!";
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
}
</script>
O‘zingiz sinab ko‘ring »
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish