# JavaScript localStorage bilan ma'lumot saqlash

> localStorage: setItem, getItem va removeItem, JSON bilan obyekt saqlash, sessionStorage farqi va hajm cheklovi. Brauzerda ma'lumot saqlashni o'rganing.

Manba: https://learncode.uz/javascript/localstorage/
Sana: 2026-06-02

Sahifa yangilanganda barcha o'zgaruvchilar yo'qoladi. Tanlangan mavzu, savatdagi
mahsulot yoki tugallangan vazifalar saqlanib qolishi uchun **localStorage**
ishlatiladi.

## Nima bu

> **Atama**
>
> **localStorage** — brauzerda ma'lumotni **kalit-qiymat** juftligi ko'rinishida
> saqlaydigan omborxona. U sahifa yangilanganda ham, brauzer yopilib qayta
> ochilganda ham saqlanadi. Har sayt (domen) o'z omborxonasiga ega — boshqa
> saytlar uni ko'ra olmaydi.

## To'rt asosiy amal

```js
localStorage.setItem("name", "Aziz");        // yozish

const name = localStorage.getItem("name");    // o'qish
console.log(name);                           // "Aziz"

localStorage.removeItem("name");             // bittasini o'chirish

localStorage.clear();                       // hammasini o'chirish
```

Mavjud bo'lmagan kalit `null` qaytaradi:

```js
const missing = localStorage.getItem("bunday-key-missing");
console.log(missing);   // null
```

> **Bu sahifada ishlamaydi**
>
> Darsdagi kod maydonlari xavfsizlik uchun **izolyatsiyalangan** muhitda
> ishlaydi — u yerda `localStorage` ochilmaydi. Quyidagi misollarni brauzer
> konsolida (F12 → Console) yoki o'z HTML faylingizda sinang.

## Hamma narsa matn bo'ladi

Bu — asosiy tuzoq:

```js
localStorage.setItem("age", 20);

const age = localStorage.getItem("age");
console.log(age);          // "20"  ← text!
console.log(typeof age);   // "string"
console.log(age + 5);      // "205" ← qo'shilmadi, birlashdi
```

Songa qaytarish kerak:

```js
const age = Number(localStorage.getItem("age"));
console.log(age + 5);   // 25
```

Xuddi shu muammo `true`/`false` bilan ham bor:

```js
const stored = "false";

if (stored) {
  console.log("Bu bajarildi — chunki bo'sh bo'lmagan matn true!");
}

console.log(stored === "true");
```

Bo'sh bo'lmagan har qanday matn — `true`. Shuning uchun `=== "true"` bilan
solishtiring.

## Obyekt saqlash — JSON orqali

localStorage faqat matn saqlaydi, shuning uchun obyekt
[JSON](https://learncode.uz/javascript/json) ga o'giriladi:

```js
const student = { name: "Aziz", age: 20, group: "IT-21" };

localStorage.setItem("talaba", JSON.stringify(student));

const mapWith = JSON.parse(localStorage.getItem("talaba"));
console.log(restored.name);        // "Aziz"
console.log(restored.age + 1);   // 21
```

`stringify` bilan yozing, `parse` bilan o'qing — bu juftlik doim birga yuradi.

## Xavfsiz o'qish funksiyasi

Omborxonada buzilgan ma'lumot bo'lishi mumkin, shuning uchun o'qishni
himoyalash kerak:

```js
function loadStored(key, fallback = null) {
  try {
    const text = localStorage.getItem(key);
    if (text === null) return fallback;
    return JSON.parse(text);
  } catch {
    return fallback;
  }
}

const settings = loadStored("settings", { theme: "yorug'" });
console.log(settings.theme);
```

Uch holat qoplandi: kalit yo'q, JSON buzilgan, `localStorage` ochilmaydi.

## Amaliy misol — vazifalar ro'yxati

Quyidagi mantiqni omborxonasiz sinab ko'ring. Haqiqiy loyihada
`tasks` massivi har o'zgarishda saqlanadi:

```js
let tasks = [];

const ul = document.querySelector("#list");
const input = document.querySelector("#text");

function save() {
  // Haqiqiy loyihada:
  // localStorage.setItem("tasks", JSON.stringify(tasks));
  console.log("Saqlandi:", JSON.stringify(tasks));
}

function render() {
  ul.innerHTML = "";
  for (const v of tasks) {
    const li = document.createElement("li");
    li.textContent = v;
    ul.append(li);
  }
}

document.querySelector("#add").addEventListener("click", () => {
  if (!input.value.trim()) return;
  tasks.push(input.value.trim());
  input.value = "";
  render();
  save();
});

tasks = ["Dars o'qish", "Kod yozish"];
render();
save();
```

```html
<input id="text" placeholder="Yangi vazifa">
<button id="add">Qo'shish</button>
<ul id="list"></ul>
```

Naqsh doimiy: **o'zgartir → chiz → saqla**. Sahifa ochilganda esa teskarisi —
o'qi → chiz.

## sessionStorage — vaqtinchalik

Bir xil API, boshqa umr:

| | localStorage | sessionStorage |
|---|---|---|
| Brauzer yopilsa | **Saqlanadi** | O'chadi |
| Yangi ichki oyna | Umumiy | Alohida |
| Hajm | ~5-10 MB | ~5 MB |

```js
sessionStorage.setItem("step", "3");
```

Ko'p qadamli forma holatini saqlashga mos — foydalanuvchi ketgach kerak emas.

## Nimani saqlamaslik kerak

> **Xavfsizlik**
>
> localStorage'ni **har qanday JavaScript o'qiy oladi**. U yerga hech qachon
> parol, to'lov kartasi ma'lumoti yoki sessiya tokenini yozmang. Faqat
> zararsiz sozlamalar: mavzu, til, ro'yxat, qoralama matn.

Hajm ham cheklangan (~5 MB). Ko'p ma'lumot uchun IndexedDB ishlatiladi.

## Kalitlarni sanash

```js
console.log(localStorage.length);

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, "=", localStorage.getItem(key));
}
```

## Amaliy mashq

Brauzer konsolida bajaring:

1. `setItem` bilan ismingizni saqlang, `getItem` bilan o'qing;
2. son saqlab, uni o'qiganda `typeof` bilan turini tekshiring;
3. obyektni `JSON.stringify` orqali saqlang va qayta o'qing;
4. `removeItem` va `clear` ni sinang;
5. `loadStored` kabi xavfsiz o'qish funksiyasini yozing;
6. sahifani yangilab, ma'lumot joyida qolganini tasdiqlang.

6-qadam localStorage'ning butun mohiyatini ko'rsatadi.

## Qisqacha xulosa

- `localStorage` ma'lumotni brauzerda **doimiy** saqlaydi.
- To'rt amal: `setItem`, `getItem`, `removeItem`, `clear`.
- Hamma qiymat **matn** bo'lib saqlanadi — songa `Number` bilan qaytaring.
- Obyekt uchun `JSON.stringify` / `JSON.parse` juftligi.
- Yo'q kalit `null` qaytaradi; o'qishni `try/catch` bilan himoyalang.
- `sessionStorage` — brauzer yopilguncha; maxfiy ma'lumot **saqlanmaydi**.

Keyingi darsda [scope va closure](https://learncode.uz/javascript/scope-closure) — o'zgaruvchilar
qayerda ko'rinishi haqida.