Vibecoding · 9-dars · 9-11 sinflar

Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding Hafta: 2Неделя: 2Week: 2

Doimiy Xotira: LocalStorage va State

Saytni refresh (F5) qilganda barcha ma'lumotlar o'chib ketishidan charchadingizmi? Brauzer xotirasiga ma'lumot saqlashni o'rganamiz.

Amneziya Muammosi

Nega Veb-saytlar "Amneziya"ga uchraydi?

Brauzer har bir sahifa yangilanganda (F5 bosilganda) HTML, CSS va JS fayllarni boshidan qayta o'qiydi.

Amneziya: Siz tanlagan til (UZ), yoqqan tungi rejim (Dark mode) yoki hisoblagan valyutangiz o'chib ketadi!
Yechim: Foydalanuvchi kompyuterining qattiq diskidagi maxsus ombor — LocalStorage!

Mitti Ombor

LocalStorage nima?

LocalStorage — brauzer ichida har bir saytga beriladigan 5-10 Megabaytlik shaxsiy, doimiy xotiradir.

1. Doimiylik

Kompyuterni o'chirib yoqsangiz ham saqlangan ma'lumot o'chmaydi.

💾

2. Tezkorlik

Internet kerak emas! Barcha ma'lumot kompyuterning o'zida yashaydi.

⚡

3. Kalit-Qiymat

Xuddi JSON kabi: key -> value juftliklarida saqlanadi.

🔑

Sintaksis

LocalStorage ning 3 ta Sehrli Buyrug'i

JavaScript da xotira bilan ishlash uchun faqat 3 ta metodni bilish kifoya:

1. Saqlash: localStorage.setItem("mavzu", "dark");
2. O'qish: var rejim = localStorage.getItem("mavzu");
3. O'chirish: localStorage.removeItem("mavzu");

Farqlar

LocalStorage vs Cookies vs SessionStorage

LocalStorage

Hajm: 5–10MB.
Umr: O'chirib tashlanmaguncha mangu yashaydi.
Qo'llanish: Mavzu, sozlamalar, kesh.

SessionStorage

Hajm: 5MB.
Umr: Vkladka yopilganda o'chib ketadi.
Qo'llanish: Bir martalik formalar.

Cookies

Hajm: 4KB (mitti).
Umr: Muddatli.
Qo'llanish: Server bilan sessiya va login tokenlari.

JSON Ko'prigi

Massivlarni Saqlash: stringify va parse

LocalStorage faqat oddiy Matn (String) tushunadi. Ro'yxat yoki Ob'ekt saqlash uchun nima qilamiz?

JSON.stringify(ro'yxat)

JavaScript ob'ektini yoki massivini matnga (string) aylantirib xotiraga yozadi.

JSON.parse(matn)

Xotiradan olingan matnni yana JavaScript massiviga aylantirib beradi.

Yangi Imkoniyat

Konverterga "Tarix" (History) Qo'shish

Valyuta konverterimizda har safar foydalanuvchi hisoblaganda, oxirgi 5 ta hisob-kitob saqlanib borsin:

    📋 Oxirgi hisoblar:

    • 100 USD = 1,285,000 UZS (10:15)

    • 50 EUR = 705,000 UZS (10:12)

    • 5,000 RUB = 700,000 UZS (09:50)

Foydalanuvchi ertaga qaytib kirsa ham, bu ro'yxat joyida turadi!

Taqiqlangan Hudud

LocalStorage ga NIMALARNI Saqlash Mumkin EMAS?

LocalStorage mutlaqo OCHIQ ombordir. Kompyuterdan foydalangan har qanday odam uni o'qiy oladi.

❌ Parollar: Foydalanuvchilar parolini hech qachon LocalStorage ga yozmang!
❌ Bank kartalari va CVV: Moliyaviy maxfiy ma'lumotlar qat'iyan taqiqlanadi!
✅ Mumkin: Tungi rejim sozlamasi, tanlangan til, hisob-kitob tarixi, savatchadagi mahsulotlar (Cart).

Muhandis Ko'zi

DevTools: Xotirani Qayerda Ko'ramiz?

Haqiqiy dasturchilar xotiraning qanday to'layotganini o'z ko'zlari bilan ko'rishadi:

1. Tugma: Brauzerda F12 yoki Ctrl + Shift + I tugmasini bosing.
2. Bo'lim: Tepadagi menyulardan Application (Ilova) bo'limiga o'ting.
3. Storage: Chap menyuda Local Storage -> saytingiz nomini tanlang. Barcha saqlangan kalitlar ro'yxati ko'rinadi!

Vibecoder Usuli

AI dan Xotira Qo'shishni So'rash

"Mavjud valyuta konverteri kodiga LocalStorage integratsiyasini qo'sh:
1. Foydalanuvchi oxirgi tanlagan valyutalarini (From/To) xotirada saqlab qol. Sahifa yangilanganda o'sha valyutalar tanlangan tursin.
2. Har safar hisoblanganda oxirgi 5 ta amaliyotni 'Tarix' ro'yxatiga yoz va LocalStorage da saqla.
3. 'Tarixni tozalash' tugmasini qo'sh, u bosilganda ro'yxat o'chsin."

Xotira Sinovi

Amaliy Vazifa: Amneziyani Davolash

1. Valyuta konverteriga LocalStorage ulab, tanlangan valyutani saqlash
2. Oxirgi hisoblangan 5 ta amalni "Tarix" panelida ko'rsatish
3. Sahifani F5 qilib yangilanganda barcha ma'lumotlar saqlanib qolishi

10 ballik mezon

Valyuta konverteriga LocalStorage ulab, tanlangan valyutani saqlash3

Oxirgi hisoblangan 5 ta amalni "Tarix" panelida ko'rsatish4

Sahifani F5 qilib yangilanganda barcha ma'lumotlar saqlanib qolishi3

Jami10

Dars Yakuni

Dars Xulosasi: Foydalanuvchi Holati (State)

State (Holat): Ilovaning ayni paytdagi ko'rinishi va ma'lumotlari.
LocalStorage: Holatni foydalanuvchi kompyuterida doimiy saqlab qolish asbobi.
Keyingi darsda ilovamizni himoyalaymiz: Login/Parol va Xavfsizlik (.env)!