LocalStorage va Doimiy Xotira: O'yin Rekordlari va Holatni Saqlash
O'yinda 5000 ball to'pladingiz, adashib F5 tugmasini bosib yubordingiz — va butun natijangiz bir zumda yo'qoldi! Nega oddiy JavaScript o'zgaruvchilari sahifa yangilanganda o'chib ketadi va qanday qilib `localStorage` hamda JSON orqali rekordlarni bir umrga eslab qolamiz?
F5 Sindromi: Nega Oddiy O'zgaruvchilar Yo'qolib Ketadi?
RAM: Qisqa Muddatli Xotira
`let score = 100;` deb yozganimizda, bu son kompyuterning operativ xotirasida (RAM) saqlanadi.
Foydalanuvchi sahifani yangilashi (F5) yoki yopishi bilan, brauzer butun xotirani tozalab tashlaydi. Hamma o'zgaruvchilar yana noldan boshlanadi!
LocalStorage: Doimiy Xotira
LocalStorage — bu har bir sayt uchun foydalanuvchining qattiq diskida (SSD) ajratilgan shaxsiy kiber-ombor.
• Kompyuter o'chib-yoqilsa ham ma'lumotlar saqlanib qoladi!
• Brauzer yopilganda ham o'chmaydi.
• Hajmi: har bir domen uchun 5–10 MB gacha matnli xotira.
Kiber-Ombor Qoidasi: Kalit va Qiymat (Key-Value) Juftligi
LocalStorage Qanday Saqlaydi?
Kiyinish xonasidagi shkaflarni tasavvur qiling. Biror narsani saqlash yoki olish uchun uning Kaliti (Key) — nomi kerak bo'ladi.
| Kalit (Key) | Qiymat (Value) | Nima saqlanmoqda? |
|---|---|---|
'bestScore' |
'1450' |
O'yindagi eng yuqori natija |
'theme' |
'dark' |
Foydalanuvchi tanlagan mavzu |
'pilot' |
'Ali' |
O'yinchi taxallusi |
LocalStorage ning Bosh Qoidasi
LocalStorage FAQAT MATN (String) saqlay oladi!
Son saqlasangiz (masalan, `500`), u matnga aylanadi: `'500'`.
Rost qiymat bersangiz (`true`), u `'true'` matni bo'ladi.
Matematika hisob-kitoblarida buni inobatga olish shart!
Xotiraga Yozish: `localStorage.setItem('kalit', qiymat)`
Qanday Ishlaydi?
Aynan ikkita argument qabul qiladi:
1. Kalit nomi (matn)
2. Yozilishi kerak bo'lgan qiymat.
Agar bu kalit hali yo'q bo'lsa — yangi yaratiladi. Agar oldin mavjud bo'lsa — yangi qiymat eskisi ustiga yoziladi!
Amaliy Kod Misollari
localStorage.setItem('highScore', 1250);
// Foydalanuvchi sozlamasini saqlash
localStorage.setItem('gameVolume', 80);
// Qorong'i mavzuni saqlash
localStorage.setItem('theme', 'dark');
Xotiradan O'qish: `localStorage.getItem('kalit')`
O'yin Ochilganda Nima Bo'ladi?
O'yinchi saytga kirishi bilan dastur kiber-ombordan so'raydi:
'Bizda oldin o'rnatilgan rekord bormi?'
Agar bor bo'lsa — o'sha qiymatni qaytaradi.
Agar o'yinchi birinchi marta kirayotgan bo'lsa — ombor null qaytaradi!
Null dan Himoyalanish Usuli
let saved = localStorage.getItem('highScore');
// Agar null bo'lsa, 0 deb olamiz:
let best = saved !== null ? parseInt(saved, 10) : 0;
// Yoki qisqa yozilish:
let bestShort = parseInt(localStorage.getItem('highScore'), 10) || 0;
Xotirani O'z Ko'zimiz Bilan Ko'ramiz: DevTools > Application
DevTools da Ochish Tartibi
1. Klaviaturada F12 ni bosing.
2. Yuqori menyudan Application bo'limiga o'ting (ko'rinmasa, `>>` belgisini bosing).
3. Chap ustunda Storage → Local Storage tugmasini oching.
4. O'z saytingiz manzilini bosing.
5. Barcha kalit va qiymatlaringiz jonli jadvalda ko'rinadi!
Qo'lda O'zgartirish va Test
Dasturchi bu jadvalda to'g'ridan-to'g'ri:
• Rekordni sichqoncha bilan 999999 ga o'zgartirishi;
• Kalitni o'chirib tashlashi;
• 🚫 tugmasi bilan barcha xotirani tozalab test qilishi mumkin.
Katta Tuzoq: Nega 50 + 10 = 5010 Bo'lib Qoladi?
Matn Qo'shilishi Xatosi
Chunki `getItem` har doim matn (string) qaytaradi! Shuning uchun `+` belgisi sonlarni qo'shmaydi, balki matnlarni birlashtiradi:
let total = score + 10;
console.log(total); // ❌ '5010' chiqdi! (60 emas)
Songa Aylantirish Usullari
Xotiradan o'qigach, har doim `parseInt()` yoki `Number()` ishlating:
let scoreNum = parseInt(scoreStr, 10);
let total = scoreNum + 10;
console.log(total); // ✅ 60 to'g'ri chiqdi!
Butun O'yinchi Profilini Saqlash: `JSON.stringify` va `JSON.parse`
Ob'yekt Saqlash Muammosi
Agar siz ob'yektni to'g'ridan-to'g'ri saqlamoqchi bo'lsangiz, brauzer uni yaroqsiz `[object Object]` yozuviga aylantirib qo'yadi.
Yechim: JSON (JavaScript Object Notation) — ob'yektlarni matnga aylantirish standarti!
JSON ning 2 Asosiy Metodi
const player = { name: 'Temur', rank: 5 };
localStorage.setItem('player', JSON.stringify(player));
// 2. O'qish: Matn -> Ob'yekt (parse)
const raw = localStorage.getItem('player');
const user = JSON.parse(raw);
console.log(user.name); // 'Temur'
To'liq Algoritm: Rekordni Solishtirish va Saqlash
Mantiqiy Zanjir
1. O'yin tugadi, o'yinchi `currentScore` to'pladi.
2. LocalStorage dan eski rekord `savedBest` o'qiladi.
3. Tekshiramiz: yangi ball eski rekorddan kattami?
4. Agar HA bo'lsa — xotiraga yangi rekord yoziladi va animatsiya chiqadi!
5. Agar YO'Q bo'lsa — eski rekord o'zgarmasdan qoladi.
Tayyor Funksiya Kodingiz
let best = parseInt(localStorage.getItem('best'), 10) || 0;
if (current > best) {
localStorage.setItem('best', current);
console.log("🎉 Yangi rekord o'rnatildi!");
}
}
Xotirani O'chirish: `removeItem()` va `clear()`
1. Bitta Kalitni O'chirish
`localStorage.removeItem('bestScore')` faqat ko'rsatilgan kalitni o'chiradi. Boshqa ma'lumotlar saqlanib qoladi.
2. Barcha Xotirani Tozalash
`localStorage.clear()` saytingizga tegishli hamma kalitlarni tozalab yuboradi. Barcha sozlamalar nollanadi.
Amaliy Laboratoriya: Cyber Vault Lab da Rekordlarni Saqlaymiz!
1. Ball Yig'ish
+100 va +500 tugmalarini bosib, yuqori ball to'plang.
currentScore > best2. F5 Sinovi
'F5 Simulyatsiyasi' tugmasini bosing. Rekord o'chmaganini ko'ring!
State Restored3. JSON Profil
Uchuvchi nomini yozib, JSON.stringify orqali saqlang.
JSON.stringifyclasses/7-8-sinf/2-hafta/11-dars-localstorage-va-yuqori-ball/lab/index.html
10 Ballik Baholash Mezoni va Keyingi Dars
10 Ballik Mezon
| Ball | Talab |
|---|---|
| 1–3 ball | setItem va getItem metodlari konsolda ishlatildi |
| 4–7 ball | Rekord saqlanib, F5 sinovidan muvaffaqiyatli o'tdi |
| 8–10 ball | JSON profil saqlandi, varaqadagi barcha topshiriqlar bajarildi |
Keyingi 12-darsda:
O'yin Turniri va Global Deploy: O'z o'yiningizni butun dunyo internetiga (Vercel / GitHub Pages) joylash, QR kod yaratib, do'stlaringiz bilan telefon orqali chempionat o'tkazish!
Kirish
0–3