Состояние приложения и 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)