Ҳолати барнома ва localStorage

01 Ҳолати барнома чист

Ҳолат (state) — ин ҳамаи маълумотест, ки барномаро ҳамин ҳозир тавсиф мекунанд ва метавонанд тағйир ёбанд: рӯйхати вазифаҳо, кадомашон иҷро шудаанд, филтри интихобшуда, мавзӯи тарҳ, маҳсулот дар сабад. Агар аз ҳолат «акс» гиред, аз рӯи он он чиро, ки корбар мебинад, пурра барқарор кардан мумкин аст.

Навомӯзон чӣ тавр мекунанд: маълумот «пароканда» аст

Аввалин чизе, ки ба хотир меояд — барои ҳар хурдакорӣ тағйирёбандаи алоҳида сохтан, ва қисми маълумотро умуман он чизе ҳисоб кардан, ки дар саҳифа навишта шудааст. Чунин код зуд ба бесаранҷомӣ табдил меёбад:

let ownerName = "Мадина";
let balance = 150;
let operations = 2;
let lastOperation = "пополнение";

function showWallet() {
  console.log(`${ownerName}: ${balance} сомони, операций: ${operations}, последняя — ${lastOperation}`);
}

showWallet();

То даме ки тағйирёбандаҳо чортоянд, ин тоқатпазир аст. Аммо вақте бист шуданд, ба саволҳои оддӣ ҷавоб додан мумкин нест: маҳз чиро захира кардан лозим? Чиро ба функсия додан? Ҳангоми баромадани корбар чиро тоза кардан?

Дар лоиҳаҳои воқеӣ чӣ тавр мекунанд: як объект

Ҳамаи маълумоти тағйирёбандаи барномаро дар як объект мегузоранд — одатан онро state меноманд.

const state = {
  ownerName: "Мадина",
  balance: 150,
  history: ["пополнение", "покупка"],
};

function showWallet(state) {
  const last = state.history[state.history.length - 1];
  console.log(`${state.ownerName}: ${state.balance} сомони, последняя операция — ${last}`);
}

showWallet(state);
console.log(JSON.stringify(state)); // тамоми барнома — бо як нигоҳ

Фоидаҳо фавран намоёнанд: функсияҳо state-ро мегиранд ва дигар чизеро намеҷӯянд; «чиро захира кардан» — ин танҳо state аст; ислоҳ осонтар аст — кифоя аст як объектро чоп кунед ва тамоми барномаро бубинед.

Чиро ба ҳолат гузоштан лозим, чиро не

Дар ҳолат далелҳои аслӣ-ро нигоҳ медоранд, ки онҳоро аз маълумоти дигар баровардан мумкин нест. Ҳар чизеро, ки аз ҳолат ҳисоб кардан мумкин аст, дар он нигоҳ доштан лозим нест — ин маълумоти ҳосилшуда аст.

const state = {
  items: [{ title: "Самбуса", price: 5, qty: 3 }],
  total: 15,        // ҳисоб кардан мумкин аст
  itemsCount: 1,    // ҳисоб кардан мумкин аст
};

const state = {
  items: [{ title: "Самбуса", price: 5, qty: 3 }],
};
const getTotal = (state) =>
  state.items.reduce((sum, i) => sum + i.price * i.qty, 0);

Ба ҳолат

Рӯйхати вазифаҳо, филтри интихобшуда, мавзӯъ, маҳсулот дар сабад, номи корбар, рақами қадами ҷорӣ.

На ба ҳолат

Ҷамъи сабад, шумораи вазифаҳои иҷрошуда, сатрҳои тайёри HTML — ҳар чизе ки аз ҳолат ҳисоб кардан мумкин аст.

Бошуурона қарор медиҳем

Чизҳои муваққатӣ мисли матни дар майдон чопшаванда. Онҳоро дар ҳолат нигоҳ доштан мумкин аст, ё захира накардан — дар ин бора боз дар бахши ЗС сухан меронем.

const state = { visitors: 10 };

let visitors = state.visitors; // ададро нусха кардем
visitors = visitors + 1;       // нусхаро тағйир додем

console.log(visitors);         // → 11
console.log(state.visitors);   // → 10 — дар ҳолат чизе тағйир наёфт

Барои муфассалтар хондан: learn.javascript.ru — Объекты · Копирование объектов и ссылки

let owner = "Мадина";
let balance = 150;
let currency = "сомони";

// const state = { ... }-ро бо майдонҳои owner, balance, currency созед


console.log(JSON.stringify(state));

{"owner":"Мадина","balance":150,"currency":"сомони"}

const state = {
  items: [
    { title: "Самбуса", price: 5, qty: 3 },
    { title: "Чой", price: 8, qty: 2 },
    { title: "Нон", price: 4, qty: 1 },
  ],
};

// function getTotal(state) { ... }

console.log(getTotal(state));
state.items[2].qty = 3; // харидор боз нон гирифт
console.log(getTotal(state));

35
43

const state = { visitors: 0 };

function addVisitor(state) {
  let visitors = state.visitors;
  visitors = visitors + 1;
}

addVisitor(state);
addVisitor(state);
addVisitor(state);
console.log("Посетителей:", state.visitors);

Посетителей: 3

02 Рендер аз ҳолат: render(state)

Ғояи навбатӣ — аз ҳама муҳим дар дарс. Экран зиндагии худро намекунад: он ҳар дафъа аз нав аз рӯи ҳолат кашида мешавад. Барои ин функсияи render-ро менависанд. Он ҳолатро мегирад ва нишон медиҳад. Дигар чизе намекунад: чизеро тағйир намедиҳад ва чизеро ҳал намекунад.

Барои он ки ҳоло ба HTML парешон нашавем, «экран» дар мисоли аввал консол мешавад:

const state = {
  todos: [
    { id: 1, text: "Купить нон", done: true },
    { id: 2, text: "Сделать домашку по JS", done: false },
  ],
};

function render(state) {
  console.log("--- Список дел ---");
  state.todos.forEach((todo) => {
    const mark = todo.done ? "[x]" : "[ ]";
    console.log(`${mark} ${todo.text}`);
  });
}

render(state);

Акнун ҳамин чиз дар саҳифаи воқеӣ. Ба сохтори скрипт диққат диҳед: дар боло ҳолат, баъд render, баъд амал ва коркардкунандаи клик. «Добавить блюдо»-ро пахш кунед ва бубинед, ки рӯйхат чӣ тавр тағйир меёбад:

<button id="add">Добавить блюдо</button>
<ul id="menu"></ul>
<p id="info"></p>

ul { padding-left: 20px; }
li { margin: 4px 0; }
#info { color: #6b7280; }

const menu = document.querySelector("#menu");
const info = document.querySelector("#info");
const addBtn = document.querySelector("#add");

// 1. Ҳолат
const state = {
  dishes: ["Оши палав", "Самбуса"],
};
const NEXT = ["Курутоб", "Шакароб", "Манту", "Чакка"];

// 2. Рендер: экранро аз рӯи ҳолат мекашад
function render() {
  menu.textContent = ""; // рӯйхатро пок кардем
  state.dishes.forEach((name) => {
    const li = document.createElement("li");
    li.textContent = name;
    menu.append(li);
  });
  info.textContent = `Блюд в меню: ${state.dishes.length}`;
}

// 3. Амал: ҳолатро тағйир медиҳад ва аз нав кашиданро талаб мекунад
addBtn.addEventListener("click", () => {
  const next = NEXT[state.dishes.length - 2];
  if (next) state.dishes.push(next);
  render();
});

render();
console.log("блюд в состоянии:", state.dishes.length);

Қоидаҳои render-и хуб

1. Танҳо ҳолатро мехонад. Маълумотро барои экран аз state мегирем, на аз DOM. Не list.children.length, балки state.todos.length.
2. Чизеро тағйир намедиҳад. Дар дохили render push, state.x = … ва дигар тағйироти маълумот нест.
3. Ҳамаро пурра мекашад. Контейнерро пок кардем ва аз нав сохтем. Барои рӯйхатҳо аз даҳҳо элемент ин фаврист, ва хатоҳо камтар: фикр кардан лозим нест, «маҳз чӣ тағйир ёфт».
4. Баъди ҳар амал даъват мешавад. Ҳолатро тағйир додем — render()-ро даъват кардем. Фаромӯш кардем — экран «дурӯғ мегӯяд».
5. Ҳолати холиро кашида метавонад. Агар вазифаҳо набошанд, «Список пуст»-ро нишон медиҳем, на холигии сафед.

// ❌ маълумотро аз DOM мегирем
const count = list.children.length;
if (count >= 5) {
  alert("Слишком много задач");
}

// ✓ маълумотро аз ҳолат мегирем
if (state.todos.length >= 5) {
  alert("Слишком много задач");
}

Барои муфассалтар хондан: learn.javascript.ru — DOM-дерево · MDN — Введение в DOM

const state = {
  todos: [
    { id: 1, text: "Купить нон", done: true },
    { id: 2, text: "Сделать домашку по JS", done: false },
    { id: 3, text: "Позвонить маме", done: false },
  ],
};

// function render(state) { ... }

render(state);

[x] Купить нон
[ ] Сделать домашку по JS
[ ] Позвонить маме

function render(state) {
  // коди шумо
}

render({ todos: [] });
render({ todos: [{ id: 1, text: "Выучить localStorage", done: false }] });

Список пуст — добавьте первую задачу
[ ] Выучить localStorage

const state = { todos: [{ id: 1, text: "Хлеб", done: false }] };

function render(state) {
  console.log("--- Экран ---");
  state.todos.forEach((todo) => console.log(`${todo.done ? "[x]" : "[ ]"} ${todo.text}`));
}

function addTodo(text) {
  state.todos.push({ id: state.todos.length + 1, text, done: false });
}

render(state);
addTodo("Молоко");
addTodo("Чой");

--- Экран ---
[ ] Хлеб
--- Экран ---
[ ] Хлеб
[ ] Молоко
--- Экран ---
[ ] Хлеб
[ ] Молоко
[ ] Чой

const state = {
  filter: "all",
  todos: [
    { id: 1, text: "Нон", done: true },
    { id: 2, text: "Молоко", done: false },
    { id: 3, text: "Чой", done: true },
    { id: 4, text: "Зира", done: false },
  ],
};

// function render(state) { ... }

render(state);
state.filter = "active";
render(state);
state.filter = "done";
render(state);

Фильтр: all
[x] Нон
[ ] Молоко
[x] Чой
[ ] Зира
Осталось: 2
Фильтр: active
[ ] Молоко
[ ] Зира
Осталось: 2
Фильтр: done
[x] Нон
[x] Чой
Осталось: 2

03 Амалҳо: ҳолатро чӣ тавр дуруст тағйир додан

Ҳолатро функсияҳои хурди амал (actions) тағйир медиҳанд: addTodo, toggleTodo, removeTodo. Коркардкунандаҳои ҳодисаҳо худашон ба маълумот намедароянд — онҳо танҳо амали лозимиро даъват мекунанд. Ҳар амал се корро мекунад: ҳолатро тағйир медиҳад → render()-ро даъват мекунад (ва дар бахшҳои оянда — боз захира мекунад).

Се усул барои массивҳо дар ҳолат

Ҳамаи тағйирот дар рӯйхат ба се амал мерасад. Мувофиқа мекунем, ки массивро на «дар ҷои худ» тағйир диҳем, балки навашро таъин кунем — ин тавр пайгирии он ки маҳз чӣ тағйир ёфт осонтар аст, ва маҳз ҳамин услуб дар React боз ба шумо лозим мешавад.

const state = { nextId: 1, todos: [] };

function render() {
  console.log("--- Экран ---");
  if (state.todos.length === 0) console.log("(пусто)");
  state.todos.forEach((t) => console.log(`${t.id}. ${t.done ? "[x]" : "[ ]"} ${t.text}`));
}

function addTodo(text) {
  const todo = { id: state.nextId, text, done: false };
  state.nextId = state.nextId + 1;
  state.todos = [...state.todos, todo];
  render();
}

function toggleTodo(id) {
  state.todos = state.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t));
  render();
}

function removeTodo(id) {
  state.todos = state.todos.filter((t) => t.id !== id);
  render();
}

addTodo("Купить нон");
addTodo("Выучить JSON");
toggleTodo(1);
removeTodo(2);

id-ро аз куҷо гирифтан

Ҳар вазифа бояд id-и ягона дошта бошад: тавассути он мо онро барои қайд ё нест кардан меёбем. Васваса — гирифтани state.todos.length + 1. Он баъди аввалин нест кардан вайрон мешавад:

let todos = [{ id: 1 }, { id: 2 }, { id: 3 }];

todos = todos.filter((t) => t.id !== 1);          // якумро нест кардем: ду то монд
todos = [...todos, { id: todos.length + 1 }];     // нав id = 3 гирифт

console.log(todos.map((t) => t.id).join(","));    // → 2,3,3 — ду id-и якхела!

Бинобар ин дар ҳолат ҳисобкунаки алоҳидаи nextId-ро нигоҳ медоранд: он танҳо меафзояд ва ҳеҷ гоҳ як рақамро ду маротиба намедиҳад.

Амалҳо дар саҳифаи воқеӣ

Вакилкуниро аз дарси 9 ба ёд оред: як коркардкунанда дар рӯйхат, ва элементи лозимиро тавассути event.target.closest(...) меёбем. Вазифаи лозимиро аз рӯи data-id муайян мекунем:

list.addEventListener("click", (event) => {
  const li = event.target.closest("li");
  if (!li) return;                     // клик берун аз вазифаҳо
  toggleTodo(Number(li.dataset.id));   // data-id — сатр, ба адад табдил медиҳем
});

Ба Number(...) диққат диҳед: қиматҳо аз dataset ҳамеша сатранд, ва id дар ҳолат — адад. Бе табдил t.id === id ҳеҷ гоҳ кор намекунад: 1 === "1" — ин false аст.

const state = { todos: [{ id: 1, done: false }] };

state.todos.map((t) => ({ ...t, done: true })); // массиви навро ба ҷое нанавиштем
console.log(state.todos[0].done);               // → false — чизе тағйир наёфт

Барои муфассалтар хондан: learn.javascript.ru — Методы массивов · Делегирование событий

const state = { nextId: 1, todos: [] };

// function addTodo(state, text) { ... }

addTodo(state, "Купить нон");
addTodo(state, "Выучить JSON");
console.log(JSON.stringify(state));

{"nextId":3,"todos":[{"id":1,"text":"Купить нон","done":false},{"id":2,"text":"Выучить JSON","done":false}]}

const state = {
  todos: [
    { id: 1, text: "Нон", done: false },
    { id: 2, text: "Молоко", done: false },
    { id: 3, text: "Чой", done: false },
  ],
};

const marks = (state) => state.todos.map((t) => (t.done ? "x" : "-")).join("");

// function toggleTodo(state, id) { ... }

toggleTodo(state, 2);
console.log(marks(state));
toggleTodo(state, 1);
console.log(marks(state));
toggleTodo(state, 2);
console.log(marks(state));

-x-
xx-
x--

const state = {
  nextId: 4,
  todos: [
    { id: 1, text: "Нон", done: false },
    { id: 2, text: "Молоко", done: false },
    { id: 3, text: "Чой", done: false },
  ],
};

function addTodo(state, text) {
  state.todos = [...state.todos, { id: state.nextId, text, done: false }];
  state.nextId = state.nextId + 1;
}

// function removeTodo(state, id) { ... }

removeTodo(state, 2);
addTodo(state, "Зира");
console.log(state.todos.map((t) => t.id).join(","));
console.log("Задач:", state.todos.length);

1,3,4
Задач: 3

const state = {
  items: [
    { id: 1, title: "Самбуса", qty: 2 },
    { id: 2, title: "Чой", qty: 1 },
  ],
};

const summary = (state) =>
  state.items.map((i) => `${i.title}×${i.qty}`).join(", ") || "пусто";

// function changeQty(state, id, delta) { ... }

changeQty(state, 1, +1);
console.log(summary(state));
changeQty(state, 2, -1);
console.log(summary(state));
changeQty(state, 1, -5);
console.log(summary(state));

Самбуса×3, Чой×1
Самбуса×3
пусто

<p>Посетителей: <b id="count"></b></p>
<button id="plus">+1</button>
<button id="minus">−1</button>

button { font-size: 18px; padding: 6px 16px; margin-right: 8px; }
#count { font-size: 28px; }

const countEl = document.querySelector("#count");
const plusBtn = document.querySelector("#plus");
const minusBtn = document.querySelector("#minus");

const state = { visitors: 0 };

function render() {
  // TODO: state.visitors-ро дар countEl нишон диҳед
}

plusBtn.addEventListener("click", () => {
  // TODO: state.visitors-ро зиёд кунед ва render()-ро даъват кунед
});

minusBtn.addEventListener("click", () => {
  // TODO: кам кунед, аммо на аз 0 паст, ва render()-ро даъват кунед
});

render();

// ---- санҷиши худкор: тағйир надиҳед ----
for (let i = 0; i < 3; i++) plusBtn.click();
console.log("после +1:", state.visitors, countEl.textContent);
for (let i = 0; i < 5; i++) minusBtn.click();
console.log("после −1:", state.visitors, countEl.textContent);

после +1: 3 3
после −1: 0 0

04 localStorage: хотираи браузер

Ҳоло тамоми ҳолат дар тағйирёбанда зиндагӣ мекунад. Саҳифаро нав кардед — тағйирёбандаҳо аз нав сохта мешаванд, ва ҳолат сифр мешавад. Барои он ки маълумот аз нав бор шудан гузарад, онро ба ҷое гузоштан лозим аст, ки бо саҳифа гум намешавад. Барои ин браузер localStorage дорад — анбори хурди «калид → сатр», ки ба сайт вобаста аст.

Дар бораи localStorage чиро бояд донист

• Ҷуфтҳои «калид — сатр»-ро нигоҳ медорад. Калидҳо низ сатранд.
• Маълумот ҳангоми аз нав бор шудани саҳифа, бастани ҷадвал ва ҳатто аз нав оғоз кардани браузер нест намешавад.
• Ҳар сайт анбори худро дорад: makefirststep.tj маълумоти example.com-ро намебинад.
• Ҳаҷм — тақрибан 5 МБ барои як сайт: барои рӯйхати корҳо ё танзимот ин бо захира кифоя аст.
• Корбар метавонад онро дар танзимот пок кунад ё дастӣ дар DevTools тағйир диҳад. Ба маълумоти аз он гирифташуда бовар кардан мумкин нест, ҳамон тавр ки ба воридот дар шакл.
• Дар он ҷо паролҳо ва асрорро нигоҳ надоред: ҳар скрипт дар саҳифа метавонад онҳоро бихонад.

Усулҳо

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));

Хатои дастрасӣ — гуноҳи шумо нест ва хатои дарс нест. То шумо ҳамоно машқ карда тавонед, мо ивазкунак медиҳем: объекти storage бо ҳамон усулҳои setItem, getItem, removeItem, clear. Он маълумотро дар хотира то даме ки коди шумо кор мекунад, нигоҳ медорад. Ва барои он ки «аз нав бор кардани саҳифа»-ро дар қуттии санҷиш ҳам нишон додан мумкин бошад, мо функсияи оғози барномаро якчанд маротиба пай дар пай дар як скрипт даъват мекунем: анбор мемонад, аммо тағйирёбандаҳои барнома не.

// ── ивазкунаки localStorage ─────────────────────────────────────
// Дар қуттии санҷиш localStorage-и воқеӣ дастнорас аст — дар компютери шумо
// window.localStorage-ро истифода баред. Боқимонда код тағйир намеёбад.
function createStorage() {
  let data = {};
  return {
    getItem(key) {
      return Object.hasOwn(data, key) ? data[key] : null;
    },
    setItem(key, value) {
      data[key] = String(value); // мисли воқеӣ: ҳама чиз ба сатр табдил меёбад
    },
    removeItem(key) {
      delete data[key];
    },
    clear() {
      data = {};
    },
  };
}
const storage = createStorage();
// ─────────────────────────────────────────────────────────────

storage.setItem("theme", "dark");
console.log(storage.getItem("theme"));    // → dark
console.log(storage.getItem("language")); // → null — чунин калид нест
storage.removeItem("theme");
console.log(storage.getItem("theme"));    // → null

const storage = window.localStorage;

Ҳама чиз ба сатр табдил меёбад

Ин тузоқи асосӣ аст. Адад гузоштем — сатр гирифтем. Объект гузоштем — матни "[object Object]" гирифтем.

function createStorage() {
  let data = {};
  return {
    getItem: (key) => (Object.hasOwn(data, key) ? data[key] : null),
    setItem: (key, value) => { data[key] = String(value); },
    removeItem: (key) => { delete data[key]; },
    clear: () => { data = {}; },
  };
}
const storage = createStorage();

storage.setItem("visits", 5);
const visits = storage.getItem("visits");
console.log(typeof visits);   // → string, на number
console.log(visits + 1);      // → 51 — сатрҳо мечаспанд!
console.log(Number(visits) + 1); // → 6 — ин тавр дуруст аст

storage.setItem("user", { name: "Фарход" });
console.log(storage.getItem("user")); // → [object Object] — маълумот гум шуд

Ададҳоро тавассути Number(...) бармегардонем. Ва барои объектҳо ва массивҳо абзори махсус ҳаст — JSON. Он маҳз барои «бастабандӣ»-и объект ба сатр ва «кушодан»-и бозгашт лозим аст. Бахши навбатӣ ба он бахшида шудааст.

«Аз нав бор кардан» дар қуттии санҷиш

Инак мо аз нав бор карданро чӣ тавр тақлид мекунем: функсияи openSite — ин «кушодани саҳифа» аст. Ҳар даъват аз сифр оғоз мекунад, аммо анбор боздидҳои гузаштаро дар хотир дорад:

function createStorage() {
  let data = {};
  return {
    getItem: (key) => (Object.hasOwn(data, key) ? data[key] : null),
    setItem: (key, value) => { data[key] = String(value); },
    removeItem: (key) => { delete data[key]; },
    clear: () => { data = {}; },
  };
}
const storage = createStorage();

function openSite() {
  const saved = storage.getItem("visits");        // бори аввал — null
  const visits = saved === null ? 1 : Number(saved) + 1;
  storage.setItem("visits", visits);
  console.log(`Добро пожаловать! Это визит №${visits}`);
}

openSite(); // корбар сайтро кушод
openSite(); // саҳифаро аз нав бор кард
openSite(); // рӯзи дигар кушод

Барои муфассалтар хондан: learn.javascript.ru — LocalStorage, sessionStorage · MDN — Window.localStorage

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

// коди шумо

MakeFirstStep
null

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

storage.setItem("score", 90);
const score = storage.getItem("score");
console.log(typeof score);
console.log(score + 5);

string
95

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

// function openSite() { ... }

openSite();
openSite();
openSite();
console.log("В хранилище:", storage.getItem("visits"));

Визит №1
Визит №2
Визит №3
В хранилище: 3

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

// function toggleTheme() { ... }

toggleTheme();
toggleTheme();
toggleTheme();
storage.removeItem("theme");
console.log(storage.getItem("theme"));

dark
light
dark
null

05 JSON: ҳолатро ба сатр бастабандӣ мекунем

Бо JSON шумо дар дарси 7 шинос шудед. Дар ин ҷо он вазифаи мушаххасро ҳал мекунад: localStorage танҳо сатрҳоро мегирад, ва ҳолати мо — объект бо массивҳост. Бинобар ин пеш аз навиштан мо объектро ба сатр бастабандӣ мекунем (JSON.stringify), ва баъди хондан — боз мекунем (JSON.parse).

const state = {
  filter: "all",
  todos: [{ id: 1, text: "Купить нон", done: false }],
};

const raw = JSON.stringify(state);    // объект → сатр
console.log(raw);
console.log(typeof raw);              // → string

const restored = JSON.parse(raw);     // сатр → объект
console.log(restored.todos[0].text);  // → Купить нон
console.log(restored === state);      // → false — ин нусхаи нав аст, на ҳамон объект

Ҷуфти функсияҳои saveState / loadState

То ки JSON.stringify ва setItem-ро дар даҳ ҷо нанависем, онҳоро дар ду функсия пинҳон мекунем. Тамоми барнома ба анбор танҳо тавассути онҳо муроҷиат мекунад:

const KEY = "todo-app:v1";   // калид: номи барнома + версияи формат

function saveState(state) {
  storage.setItem(KEY, JSON.stringify(state));
}

function loadState() {
  const raw = storage.getItem(KEY);
  return raw === null ? null : JSON.parse(raw);
}

Калид бо префикси todo-app: аз низоъ бо барномаҳои дигар дар ҳамон сайт муҳофизат мекунад, ва :v1 вақте лозим мешавад, ки шумо формати ҳолатро тағйир диҳед: версияи нав калиди навро хонда метавонад ва ба маълумоти кӯҳна пешпо нахӯрад.

Чӣ аз бастабандӣ намегузарад

JSON — танҳо матн бо қиматҳои оддӣ аст. На ҳар чизе ки дар объект аст, онро ба он табдил додан мумкин аст:

const task = {
  title: "Сдать проект",
  deadline: new Date(0),    // сана → сатр
  note: undefined,          // нест мешавад
  remind() { console.log("!"); }, // нест мешавад
};

const copy = JSON.parse(JSON.stringify(task));
console.log(JSON.stringify(copy));
console.log(typeof copy.deadline);  // → string
console.log(typeof copy.remind);    // → undefined

Хулоса: дар ҳолат маълумоти «оддӣ»-ро нигоҳ доред — сатрҳо, адад, қиматҳои булӣ, массивҳо ва объектҳо. Санаҳо — ҳамчун адад (Date.now()) ё сатр. Функсияҳоро ба ҳолат умуман намегузоранд: функсияҳо — амалҳоянд, онҳо дар код зиндагӣ мекунанд.

Хатоҳои JSON

Қоидаҳои формат сахтанд: калидҳо ва сатрҳо танҳо дар нохунакҳои дугона, бе вергул баъди элементи охирин, бе шарҳҳо. Вайрон кардед — JSON.parse истиснои SyntaxError-ро мепартояд, ва барнома меафтад. Мо муқобилат кардани инро дар бахши навбатӣ меомӯзем.

const raw = "{'text': 'нон'}";       // нохунакҳои ягона — ин JSON нест
const data = JSON.parse(raw);        // ✖ SyntaxError
console.log(data);

Барои муфассалтар хондан: learn.javascript.ru — Формат JSON, метод toJSON · MDN — JSON

const settings = {
  theme: "dark",
  fontSize: 16,
  favorites: ["курутоб", "шакароб"],
};

// коди шумо: сатрро гиред ва онро ва навъи онро чоп кунед

{"theme":"dark","fontSize":16,"favorites":["курутоб","шакароб"]}
string

const raw = '{"name":"Фарход","age":21,"tags":["js","css","html"]}';

// коди шумо

Фарход
3
number

const task = {
  title: "Сдать проект",
  done: false,
  deadline: new Date(0),
  note: undefined,
  remind() {
    console.log("!");
  },
};

const copy = JSON.parse(JSON.stringify(task));
console.log(JSON.stringify(copy));
console.log(typeof copy.deadline);
console.log("note" in copy);
console.log(typeof copy.remind);
// сатри панҷум — аз они шумо

{"title":"Сдать проект","done":false,"deadline":"1970-01-01T00:00:00.000Z"}
string
false
undefined
1970

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

const KEY = "todo-app:v1";

// function saveState(state) { ... }
// function loadState() { ... }

let state = {
  todos: [
    { id: 1, text: "Нон", done: true },
    { id: 2, text: "Чой", done: false },
  ],
};

saveState(state);
state = { todos: [] }; // «аз нав бор кардан»: дар хотира ҳама чиз гум шуд

const restored = loadState();
console.log(restored.todos.length);
console.log(restored.todos[0].text);

2
Нон

06 Маълумоти холӣ, вайроншуда ва кӯҳнашуда

Коде, ки «вақте ҳама чиз хуб аст» кор мекунад, нисфи кор аст. Нисфи дигар — вақте маълумот нест, вайрон шудааст ё бо версияи кӯҳнаи барнома навишта шуда буд, чӣ мешавад. Бо localStorage чунин чиз пайваста рух медиҳад:

• Оғози аввал. Корбар бори аввал омад — дар анбор холист, getItem null бармегардонад.
• Хасу хошок. Касе сабтро дар DevTools ислоҳ кард, сабт қатъ шуд, барномаи дигар таҳти ҳамон калид чизи худро навишт.
• Формати кӯҳна. Дирӯз дар ҳолат майдони filter набуд, имрӯз шумо онро илова кардед, ва дар браузери корбар акси дирӯза мемонад.

Анбори холӣ

Агар калид набошад, getItem null бармегардонад. Инро ошкоро санҷед ва ҳолати пешфарзро баргардонед:

function createStorage() {
  let data = {};
  return {
    getItem: (key) => (Object.hasOwn(data, key) ? data[key] : null),
    setItem: (key, value) => { data[key] = String(value); },
    removeItem: (key) => { delete data[key]; },
    clear: () => { data = {}; },
  };
}
const storage = createStorage();

const KEY = "todo-app:v1";
const DEFAULT_STATE = { nextId: 1, todos: [] };

function loadState() {
  const raw = storage.getItem(KEY);
  if (raw === null) return { ...DEFAULT_STATE, todos: [] }; // оғози аввал
  return JSON.parse(raw);
}

console.log(JSON.stringify(loadState())); // анбор холӣ аст

Ба { ...DEFAULT_STATE, todos: [] } диққат диҳед: мо нусхаи пешфарзро бармегардонем, на худи объектро. Вагарна ҳамаи тағйирот ба «маҷмӯаи эҳтиётӣ» меафтад, ва ҳангоми барқароркунии навбатӣ он аллакай холӣ нахоҳад буд.

JSON-и вайроншуда: try / catch

Агар дар анбор сатре бошад, ки JSON-и дуруст нест, JSON.parse истисно мепартояд. Онро тавассути try / catch мегиранд (шумо инро дар дарси 7 дидед) ва ба ҳолати пешфарз бармегарданд:

function safeParse(raw) {
  try {
    return JSON.parse(raw);
  } catch (error) {
    console.log("Данные повреждены:", error.name);
    return null;
  }
}

console.log(safeParse('{"ok":true}'));  // → { ok: true }
console.log(safeParse("{oops"));        // → Данные повреждены: SyntaxError, потом null

Шакли нодуруст: месанҷем, ки дар дохил чӣ ҳаст

Сатр метавонад JSON-и дуруст бошад, аммо тамоман на он чизе, ки мо интизор будем: адади 42, сатр, null, объект ба ҷои массив. Бинобар ин баъди parse шакли маълумотро месанҷем:

function isValidTodos(value) {
  return Array.isArray(value);
}

console.log(isValidTodos([]));            // → true
console.log(isValidTodos({ a: 1 }));      // → false — объект, на массив
console.log(isValidTodos(JSON.parse("42"))); // → false — адад
console.log(isValidTodos(JSON.parse("null"))); // → false

Ҳолат кӯҳна шуд: қиматҳои пешфарзро омехта мекунем

Вақте дар ҳолат майдонҳои нав пайдо мешаванд, аксҳои кӯҳна онҳоро надоранд. Ҳал — аз ҳолати пешфарз оғоз кардан ва он чиро, ки дар анбор ёфтем, болои он «гузоштан»:

const DEFAULT_STATE = { filter: "all", theme: "light", todos: [] };

// акси дирӯза: майдонҳои filter ва theme ҳанӯз набуданд
const saved = { todos: [{ id: 1, text: "Нон", done: false }] };

const state = { ...DEFAULT_STATE, ...saved };
console.log(JSON.stringify(state));
// → майдонҳои filter ва theme бо пешфарз гирифта шуданд, todos — аз захирашуда

Ҳама чиз якҷоя: loadState-и боэътимод

1. Сатрро баровардем тавассути getItem. Агар null — ҳолати пешфарзро баргардонем.
2. Кушодем дар дохили try / catch. Хато — ҳолати пешфарзро баргардонем.
3. Шаклро санҷидем: ин умуман объект аст (на адад, сатр, null, массив)? Не — ҳолати пешфарз.
4. Омехтем қиматҳои пешфарзро барои майдонҳои намерасида ва майдонҳои муҳимро санҷидем: масалан, todos бояд массив бошад.

function loadState() {
  const raw = storage.getItem(KEY);
  if (raw === null) return createDefaultState();     // 1. холӣ

  let saved;
  try {
    saved = JSON.parse(raw);                         // 2. JSON-и вайроншуда
  } catch {
    return createDefaultState();
  }

  if (typeof saved !== "object" || saved === null || Array.isArray(saved)) {
    return createDefaultState();                     // 3. ин объекти ҳолат нест
  }

  const state = { ...createDefaultState(), ...saved }; // 4. намерасидаро илова кардем
  if (!Array.isArray(state.todos)) state.todos = [];   //    ва майдони муҳимро таъмир кардем
  return state;
}

Печида менамояд, аммо навиштани он лозим аст як маротиба. Ба ивази ин барнома намеафтад, дар анбор ҳар чӣ бошад ҳам. Ин функсияро шумо ба лоиҳаи худ мегиред.

Барои муфассалтар хондан: learn.javascript.ru — Обработка ошибок, try…catch · MDN — Array.isArray()

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

function saveTodos(todos) {
  storage.setItem("todos", JSON.stringify(todos));
}

// function loadTodos() { ... }

console.log(loadTodos().length); // оғози аввал
saveTodos(["Нон", "Чой"]);
console.log(loadTodos().length);

0
2

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

function loadTodos() {
  const raw = storage.getItem("todos");
  if (raw === null) return [];
  // коди шумо: маълумоти вайроншударо коркард кунед
  return JSON.parse(raw);
}

storage.setItem("todos", "{oops");
console.log(loadTodos().length);
storage.setItem("todos", '["Нон","Чой"]');
console.log(loadTodos().length);

Данные повреждены — начинаем с пустого списка
0
2

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

function loadTodos() {
  const raw = storage.getItem("todos");
  if (raw === null) return [];
  try {
    const data = JSON.parse(raw);
    // коди шумо: санҷед, ки data массив аст
    return data;
  } catch {
    return [];
  }
}

for (const raw of ['{"a":1}', "42", '["Нон"]', "null"]) {
  storage.setItem("todos", raw);
  console.log(loadTodos().length);
}

0
0
1
0

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

const KEY = "todo-app:v1";
const createDefaultState = () => ({ filter: "all", theme: "light", todos: [] });

// function loadState() { ... }

console.log(JSON.stringify(loadState()));                 // 1. холӣ

storage.setItem(KEY, '{"todos":[{"id":1,"text":"Нон","done":false}]}');
console.log(JSON.stringify(loadState()));                 // 2. формати кӯҳна

storage.setItem(KEY, "}{");
console.log(JSON.stringify(loadState()));                 // 3. хасу хошок

storage.setItem(KEY, '{"filter":"done","todos":"oops"}');
console.log(JSON.stringify(loadState()));                 // 4. todos навъи нодуруст

storage.setItem(KEY, "42");
console.log(JSON.stringify(loadState()));                 // 5. на объект

{"filter":"all","theme":"light","todos":[]}
{"filter":"all","theme":"light","todos":[{"id":1,"text":"Нон","done":false}]}
{"filter":"all","theme":"light","todos":[]}
{"filter":"done","theme":"light","todos":[]}
{"filter":"all","theme":"light","todos":[]}

07 Блоки ЗС: талаб мекунем, ки сохтори ҳолатро пешниҳод кунад

Муҳимтарин лаҳза дар ҳар барнома — кадом маълумотро ва бо кадом намуд нигоҳ медоред. Хато дар ин ҷо гарон меояд: сохтори ҳолатро аз нав сохтан, вақте ки render, амалҳо ва захиракунӣ аллакай навишта шудаанд, — ҳамон аст, ки пойдевори хонаи тайёрро аз нав созем. Бинобар ин маҳз ба ин ҷо ЗС-ро ҷалб кардан мувофиқ аст — аммо ҳамчун андешаи дуюм, на ҳамчун муаллиф.

Тартиби кор

1. Версияи худӣ. Барномаро бо як ҷумла тавсиф кунед ва объекти state-ро тарҳрезӣ кунед. Қайд кунед, ки аз он чиро дар localStorage захира мекунед.
2. Промпт аз рӯи формула: контекст → вазифа → маҳдудиятҳо → формати ҷавоб → санҷиш.
3. Муқоиса. Тафовутҳоро ба ҷадвал нависед: майдон — дар ман — дар ЗС — чӣ ҳал кардам ва чаро.
4. Санҷиш. Барои ҳар ҷои баҳсбарангез аз худ бипурсед: «агар дар ин ҷо холӣ бошад ё хасу хошок бошад, чӣ мешавад?».

Промпти бад ва хуб

Чаро бад аст: ЗС на барномаро медонад, на сатҳи шуморо, на ин ки маълумот дар куҷо нигоҳ дошта мешавад. Вай ё маслиҳати умумӣ медиҳад, ё фавран меъмории азимро дар фреймворке, ки шумо надоред.

Ин варианти густурдаи қолаби ёддошти курс аст: «Сохтори объекти ҳолатро барои барномаи [тавсиф] пешниҳод кун. Шарҳ деҳ, чаро чунин майдонҳо ва чиро ба localStorage гузорам». Мо контекст, маҳдудиятҳо ва санҷишро илова кардем — ва ҷавобе гирифтем, ки онро муқоиса кардан мумкин аст.

Чек-лист: ҷавоби ЗС-ро чӣ тавр санҷидан

• Оё маълумоти ҳосилшуда нест. Агар дар ҳолат total, doneCount ё HTML-и тайёр бошад — онҳоро ҳисоб кардан мумкин аст, пас зиёдатианд.
• id-ҳои ягона. Онҳо аз куҷо мегиранд? nextId ҳаст, ё ЗС length + 1-ро пешниҳод мекунад (мо дидем, ки он чӣ анҷом меёбад)?
• Навъҳои оддӣ. Оё санаҳо, функсияҳо, undefined нестанд, ки аз JSON намегузаранд?
• Чиро захира кардан. Оё муваққатиро захира кардан лозим — масалан, матни дар майдон ҳамин ҳозир чопшаванда? Аксар вақт не: баъди аз нав бор шудан он лозим нест.
• Версияи формат. Оё ЗС калиди намуди app:v1-ро пешниҳод кард? Ҳангоми тағйири сохтор чӣ мешавад?
• Маълумоти холӣ ва вайроншуда. ЗС аксар вақт оғози аввал ва маълумоти вайроншударо «фаромӯш мекунад» — инро худатон илова кунед.

Ҷадвали муқоиса

Агар ҳама чиз мувофиқ омад — олӣ, шумо мисли тарроҳи ботаҷриба фикр мекунед. Агар фарқ дошта бошад — ин қиматноктарин ҷо аст: фаҳмед, далели кӣ қавитар аст. Ҳамин тавр ЗС меомӯзонад, на танҳо ба ҷои шумо мекунад.

// 15 дақиқа худатон, бе ЗС
const state = {
  // сохтори шумо
};

console.log(JSON.stringify(state, null, 2));

// ивазкунаки localStorage — тағйир надиҳед
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

const habits = { nextId: 1, items: [] };

function addHabit(title) {
  habits.items = [...habits.items, { id: habits.items.length + 1, title }];
}

function save() {
  storage.setItem("habits", habits);
}

function load() {
  return JSON.parse(storage.getItem("habits"));
}

addHabit("Зарядка");
addHabit("Чтение");
addHabit("Вода");
habits.items = habits.items.filter((h) => h.id !== 1); // «Зарядка»-ро нест кардем
addHabit("Сон");
console.log(habits.items.map((h) => h.id).join(","));

save();
console.log(load().items.length);

storage.clear(); // браузери «тоза»
console.log(load().items.length);

2,3,4
3
0

08 Амалиёт дар дарс: рӯйхати корҳо, ки ҳамаро дар хотир дорад

Ҳамаро якҷоя ҷамъ мекунем: рӯйхати корҳо бо ҳолат, рендер, амалҳо ва захиракунӣ. Дар се марҳила мекунем, ва ҳар кадом бо санҷиш дар консол анҷом меёбад. Дар боло болои код — ҷадвалҳои index.html, style.css, script.js. Дар script.js ҳал мекунем: шарҳҳои TODO-ро ҷӯед.

Марҳилаи 1. Ҳолат, render ва амалҳо

Аввал бе захиракунӣ: як ҳолат, як функсияи render, амалҳои addTodo ва toggleTodo ва ду коркардкунанда. Шакл вазифа илова мекунад, клик ба вазифа «иҷро шуд»-ро иваз мекунад (вакилкунӣ аз дарси 9).

<form id="form">
  <input id="text" placeholder="Что нужно сделать?" autocomplete="off">
  <button>Добавить</button>
</form>
<ul id="list"></ul>
<p id="counter"></p>

body { font-family: system-ui, sans-serif; }
form { display: flex; gap: 8px; margin-bottom: 12px; }
input { flex: 1; padding: 8px 10px; font-size: 16px; }
button { padding: 8px 14px; font-size: 15px; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; cursor: pointer; }
li.done span { text-decoration: line-through; color: #9ca3af; }
li .remove { padding: 2px 8px; }
#counter { color: #6b7280; margin-top: 10px; }

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

// 1. Ҳолат — ягона сарчашмаи ҳақиқат
const state = { nextId: 1, todos: [] };

// 2. Рендер: экранро аз рӯи ҳолат мекашад
function render() {
  list.textContent = "";
  state.todos.forEach((todo) => {
    const li = document.createElement("li");
    li.dataset.id = todo.id;
    li.className = todo.done ? "done" : "";
    li.textContent = todo.text;
    list.append(li);
  });
  // TODO: дар counter матни «Осталось: N»-ро нависед, ки N — шумораи вазифаҳои иҷронашуда
}

// 3. Амалҳо
function addTodo(text) {
  // TODO: { id: state.nextId, text, done: false }-ро ба state.todos илова кунед,
  //       state.nextId-ро зиёд кунед ва render()-ро даъват кунед
}

function toggleTodo(id) {
  // TODO: дар вазифа бо ин id done-ро баръакс кунед ва render()-ро даъват кунед
}

// 4. Ҳодисаҳо
form.addEventListener("submit", (event) => {
  // TODO: ирсоли шаклро бекор кунед, input.value-ро бе фосилаҳои канорӣ гиред,
  //       агар матн холӣ набошад — addTodo-ро даъват кунед, баъд майдонро пок кунед
});

list.addEventListener("click", (event) => {
  // TODO: li-и наздиктаринро ёбед (event.target.closest("li")); агар ёфтед —
  //       toggleTodo(Number(li.dataset.id))-ро даъват кунед
});

// ---- санҷиши худкор: тағйир надиҳед ----
function submitText(text) {
  input.value = text;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
}
render();
submitText("Купить нон");
submitText("   ");
submitText("Выучить localStorage");
list.firstElementChild.click();
console.log(state.todos.length, list.children.length);
console.log(list.firstElementChild.className, counter.textContent);

2 2
done Осталось: 1

Марҳилаи 2. Захира ва барқарор мекунем

Акнун хотира илова мекунем. Се чиз лозим аст: ду функсияи saveState ва loadState, даъвати saveState() дар охири ҳар амал ва функсияи boot() — «оғози саҳифа»: ҳолатро бор кардан ва экранро кашидан. Дар лоиҳаи воқеӣ сатри охири скрипт танҳо boot(); аст.

<form id="form">
  <input id="text" placeholder="Что нужно сделать?" autocomplete="off">
  <button>Добавить</button>
</form>
<ul id="list"></ul>
<p id="counter"></p>

body { font-family: system-ui, sans-serif; }
form { display: flex; gap: 8px; margin-bottom: 12px; }
input { flex: 1; padding: 8px 10px; font-size: 16px; }
button { padding: 8px 14px; font-size: 15px; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; cursor: pointer; }
li.done span { text-decoration: line-through; color: #9ca3af; }
li .remove { padding: 2px 8px; }
#counter { color: #6b7280; margin-top: 10px; }

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

// ивазкунаки localStorage: дар қуттии санҷиш воқеӣ дастнорас аст.
// Дар компютери худатон ин сатрҳоро бо ин иваз кунед: const storage = window.localStorage;
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

const KEY = "todo-app:v1";
let state; // дар boot() пур мешавад

function saveState() {
  // TODO: JSON.stringify(state)-ро ба storage аз рӯи калиди KEY нависед
}

function loadState() {
  // TODO: аз storage хонед. Холӣ — { nextId: 1, todos: [] }-ро баргардонед.
  //       Вагарна — JSON.parse(...)-и сатри хондашударо баргардонед
}

function render() {
  list.textContent = "";
  state.todos.forEach((todo) => {
    const li = document.createElement("li");
    li.dataset.id = todo.id;
    li.className = todo.done ? "done" : "";
    li.textContent = todo.text;
    list.append(li);
  });
  const left = state.todos.filter((t) => !t.done).length;
  counter.textContent = "Осталось: " + left;
}

function addTodo(text) {
  state.todos = [...state.todos, { id: state.nextId, text, done: false }];
  state.nextId = state.nextId + 1;
  // TODO: ҳолатро захира кунед
  render();
}

function toggleTodo(id) {
  state.todos = state.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t));
  // TODO: ҳолатро захира кунед
  render();
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const text = input.value.trim();
  if (text) addTodo(text);
  input.value = "";
});

list.addEventListener("click", (event) => {
  const li = event.target.closest("li");
  if (li) toggleTodo(Number(li.dataset.id));
});

// «Оғози саҳифа»: ҳолатро бор кардан ва экранро кашидан
function boot() {
  state = loadState();
  render();
}

// ---- санҷиши худкор: тағйир надиҳед ----
function submitText(text) {
  input.value = text;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
}
boot();
submitText("Купить нон");
submitText("Выучить localStorage");
list.firstElementChild.click();
console.log("до перезагрузки:", list.children.length, counter.textContent);

// «аз нав бор кардан»: экран пок шуд, тағйирёбандаҳо фаромӯш шуданд — танҳо storage монд
list.textContent = "";
counter.textContent = "";
state = null;
boot();
console.log("после:", list.children.length, list.firstElementChild.className, counter.textContent);

до перезагрузки: 2 Осталось: 1
после: 2 done Осталось: 1

Марҳилаи 3. Ҳифз аз хасу хошок ва нест кардан

Барномае, ки аз як сабти шикаста меафтад, барнома нест. loadState-ро боэътимод месозем (қолаб аз бахши 06) ва тугмаи «×»-ро барои нест кардани вазифа илова мекунем. Тугма дар дохили li аст, ва клик ба li аллакай вазифаро иваз мекунад — бинобар ин дар коркардкунандаи умумӣ аввал месанҷем, ки маҳз ба куҷо пахш карданд.

<form id="form">
  <input id="text" placeholder="Что нужно сделать?" autocomplete="off">
  <button>Добавить</button>
</form>
<ul id="list"></ul>
<p id="counter"></p>

body { font-family: system-ui, sans-serif; }
form { display: flex; gap: 8px; margin-bottom: 12px; }
input { flex: 1; padding: 8px 10px; font-size: 16px; }
button { padding: 8px 14px; font-size: 15px; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; cursor: pointer; }
li.done span { text-decoration: line-through; color: #9ca3af; }
li .remove { padding: 2px 8px; }
#counter { color: #6b7280; margin-top: 10px; }

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

// ивазкунаки localStorage: дар компютери худатон — const storage = window.localStorage;
const storage = (() => { let d = {}; return {
  getItem: (k) => (Object.hasOwn(d, k) ? d[k] : null), setItem: (k, v) => { d[k] = String(v); },
  removeItem: (k) => { delete d[k]; }, clear: () => { d = {}; } }; })();

const KEY = "todo-app:v1";
const createDefaultState = () => ({ nextId: 1, todos: [] });
let state;

function saveState() {
  storage.setItem(KEY, JSON.stringify(state));
}

function loadState() {
  // TODO: ҳоло функсия аз хасу хошок меафтад. Аз рӯи қолаб кунед:
  //  1) холӣ (null) — createDefaultState()
  //  2) JSON.parse дар try / catch — ҳангоми хато createDefaultState()
  //  3) на объект, todos на массив ё nextId на адад — createDefaultState()
  return JSON.parse(storage.getItem(KEY));
}

function render() {
  list.textContent = "";
  state.todos.forEach((todo) => {
    const li = document.createElement("li");
    li.dataset.id = todo.id;
    li.className = todo.done ? "done" : "";
    const text = document.createElement("span");
    text.textContent = todo.text;
    const remove = document.createElement("button");
    remove.className = "remove";
    remove.textContent = "×";
    li.append(text, remove);
    list.append(li);
  });
  const left = state.todos.filter((t) => !t.done).length;
  counter.textContent = "Осталось: " + left;
}

function addTodo(text) {
  state.todos = [...state.todos, { id: state.nextId, text, done: false }];
  state.nextId = state.nextId + 1;
  saveState();
  render();
}

function toggleTodo(id) {
  state.todos = state.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t));
  saveState();
  render();
}

function removeTodo(id) {
  // TODO: вазифаро бо ин id нест кунед (filter), ҳолатро захира кунед, render()-ро даъват кунед
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const text = input.value.trim();
  if (text) addTodo(text);
  input.value = "";
});

list.addEventListener("click", (event) => {
  const li = event.target.closest("li");
  if (!li) return;
  const id = Number(li.dataset.id);
  // TODO: агар ба тугмаи «×» пахш карданд (event.target.matches(".remove")) — removeTodo(id),
  //       вагарна — toggleTodo(id)
});

function boot() {
  state = loadState();
  render();
}

// ---- санҷиши худкор: тағйир надиҳед ----
function submitText(text) {
  input.value = text;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
}
storage.setItem(KEY, "{oops"); // дар анбор хасу хошок
boot();
console.log("битые данные:", list.children.length);

submitText("Нон");
submitText("Чой");
submitText("Зира");
list.children[1].querySelector(".remove").click();
console.log(state.todos.map((t) => t.text).join(", "), counter.textContent);

list.textContent = "";
state = null;
boot();
console.log("после перезагрузки:", list.children.length);

storage.setItem(KEY, '{"todos":"oops"}'); // JSON-и дуруст, аммо на он чиз
boot();
console.log("неверная форма:", list.children.length);

битые данные: 0
Нон, Зира Осталось: 2
после перезагрузки: 2
неверная форма: 0

09 Вазифаи хонагӣ: ба лоиҳаи дарси 9 захиракуниро илова кунед

Лоиҳаи худро аз дарси 9 (саҳифаи интерактивӣ бо ҳодисаҳо ва вакилкунӣ) гиред ва ба он дар хотир доштани маълумот-ро омӯзонед. Дар ин ҷо шумо дар компютери худатон кор мекунед — яъне воқеии localStorage-ро истифода мебаред: const storage = window.localStorage;.

Чӣ бояд кард

• Дар лоиҳа як ҳолат — объекти state ҳаст. Дар ҳеҷ ҷо маълумоте нест, ки танҳо дар DOM «зиндагӣ» мекунад.
• Экранро функсияи render() мекашад. Коркардкунандаҳои ҳодисаҳо амалҳоро даъват мекунанд, ва онҳо — render()-ро.
• saveState() ва loadState() ҳастанд; калид бо префикси лоиҳа ва версия, масалан myproject:v1.
• Ҳолат баъди ҳар амал захира мешавад ва ҳангоми кушодани саҳифа барқарор мешавад: ҷадвалро бастем, дубора кушодем — ҳама чиз ба ҷояш.
• loadState() аз инҳо мегузарад: анбори холӣ, JSON-и вайроншуда, шакли нодурусти маълумот ва майдонҳои нави намерасида.
• Тугмаи «Сбросить» ҳаст, ки маълумоти барномаро пок мекунад (removeItem аз рӯи калиди шумо) ва ҳолати оғозиро бармегардонад.
• Дар ҳолат маълумоти ҳосилшуда, функсияҳо ва объектҳои сана нестанд.

Кори худро чӣ тавр санҷидан

1. Якчанд элемент илова кунед, саҳифаро нав кунед (F5) — ҳама чиз ба ҷояш?
2. DevTools (F12) → Application → Local Storage-ро кушоед. Калиди худро ёбед, нигоҳ кунед, қимат чӣ гуна менамояд.
3. Қиматро дастӣ вайрон кунед: қавси охиринро нест кунед. Саҳифаро нав кунед — барнома бояд бо ҳолати оғозӣ оғоз шавад, на бо хато дар консол биафтад.
4. Калидро нест кунед — саҳифа бояд «мисли бори аввал» кушода шавад.
5. «Сбросить»-ро пахш кунед — маълумот ҳам аз экран, ҳам аз анбор нест шуд?

Чиро супоред

• Папкаи лоиҳа (архив ё истинод), ки дар он захиракунӣ кор мекунад.
• Файли NOTES.md: сохтори ҳолати шумо, калид дар localStorage, чӣ захира мешавад ва чӣ не, ҷадвали муқоиса бо ЗС.
• Сабти кӯтоҳи экран (то 30 сония): маълумот илова кардем → саҳифаро нав кардем → маълумот ба ҷояш → қиматро вайрон кардем → барнома наафтод.

Чӣ тавр баҳо дода мешавад (0–10)