Сохранение и восстановление доски

Соблазн велик: сохранить board.innerHTML целиком и при загрузке вставить обратно. Работает ровно до первой правки вёрстки — старые узлы приедут со старыми классами и без обработчиков. Хуже другое: вставляя в страницу сохранённый HTML, вы доверяете строке, до которой у чужого кода уже был доступ. Сохранять надо данные, а разметку строить заново.

Состояние доски — это массив карточек: идентификатор, текст, флаг выполнения. DOM — всего лишь его отражение. Значит, первым делом нужна функция, которая снимает состояние со страницы.

function readBoard() {
  const cards = document.querySelectorAll("#board li");
  return Array.from(cards).map((li) => ({
    id: li.dataset.id,
    text: li.textContent,
    done: li.dataset.done === "true",
  }));
}

const state = readBoard();

console.log(state.length);
console.log(state[1].text);
console.log(state[0].done);

readBoard ничего не сохраняет — она отвечает на один вопрос: «что сейчас на доске». Этим и удобна: результат можно записать в хранилище, сравнить с предыдущим или отправить на сервер, не меняя ни строчки в самой функции.

localStorage — словарь строк, привязанный к origin: протокол, домен и порт. Все вкладки одного сайта видят один и тот же словарь, и он переживает перезагрузку страницы, закрытие браузера и перезагрузку компьютера. Ключ — строка, значение — строка; всё остальное молча приводится к строке, поэтому setItem("board", state) с объектом запишет бесполезное [object Object]. Сериализуем сами — JSON.stringify. Про оба ящика — объём, событие storage и то, чего в них держать нельзя, — статья «localStorage и sessionStorage».

Обращение к хранилищу умеет бросать исключение: приватный режим, запрет на данные сайтов, исчерпанная квота. Незакрытая ошибка на старте убьёт всю инициализацию, поэтому доступ прячут за обёрткой с запасным вариантом. Она же спасает примеры в песочнице учебника, где настоящего хранилища может не быть.

function createStore() {
  try {
    localStorage.setItem("probe", "1");
    localStorage.removeItem("probe");
    return localStorage;
  } catch (e) {
    // хранилище недоступно — живём в памяти до перезагрузки
    const memory = new Map();
    return {
      getItem: (key) => (memory.has(key) ? memory.get(key) : null),
      setItem: (key, value) => memory.set(key, String(value)),
      removeItem: (key) => memory.delete(key),
    };
  }
}

const store = createStore();
const state = [{ id: "a1", text: "Купить кофе", done: true }];

store.setItem("board", JSON.stringify(state));
const raw = store.getItem("board");
const restored = JSON.parse(raw);

console.log(typeof raw);
console.log(restored[0].done);
console.log(restored === state);
console.log(store.getItem("nothing"));

localStorage — общая полка, а не сейф: чужим секретам там не место

Момент записи выбирают так, чтобы о нём не пришлось помнить в каждом обработчике. Рабочая схема: любое изменение проходит через одну функцию — она правит состояние, обновляет DOM и в конце зовёт save(). Тогда «забыл сохранить» становится структурно невозможным.

const board = document.querySelector("#board");
const writes = []; // здесь в реальной доске был бы store.setItem

board.addEventListener("click", (event) => {
  const li = event.target.closest("li");
  if (!li) return;
  li.dataset.done = li.dataset.done === "true" ? "false" : "true";
  writes.push(li.dataset.done);
});

const card = board.querySelector("li");
card.click();
card.click();

console.log(writes.length);
console.log(writes.join(","));

Обработчик висит на списке, а не на карточках: карточки приходят и уходят, список остаётся. В настоящем коде вместо writes.push стоял бы store.setItem("board", JSON.stringify(state)). На клик писать в хранилище нормально; на каждое нажатие клавиши в поле ввода — уже нет: запись синхронная и тормозит ввод.

Обратный путь короткий: достать строку, разобрать в данные, отрисовать. Ключевое — рисует та же самая функция render, которой пользуется всё остальное приложение. Отдельный «код восстановления» рано или поздно разойдётся с живым и начнёт рисовать доску чуть иначе.

const board = document.querySelector("#board");
const raw = `[{"id":"a1","text":"Купить кофе","done":true},{"id":"a2","text":"Написать статью","done":false}]`;

function render(cards) {
  board.replaceChildren(); // чистим одним движением, без innerHTML
  for (const card of cards) {
    const li = document.createElement("li");
    li.textContent = card.text; // textContent, а не innerHTML: текст остаётся текстом
    li.dataset.id = card.id;
    li.classList.toggle("done", card.done);
    board.append(li);
  }
}

render(JSON.parse(raw));

console.log(board.children.length);
console.log(board.firstElementChild.dataset.id);
console.log(board.firstElementChild.classList.contains("done"));
console.log(board.lastElementChild.classList.contains("done"));

Здесь raw написан руками, чтобы вывод был предсказуем; в жизни это store.getItem("board"). Обратите внимание на textContent: текст карточки пришёл из хранилища, и вставлять его как HTML нельзя — textContent делает любую строку просто буквами.

Строка из хранилища — недоверенный ввод. Её мог оборвать переполнившийся диск, переписать расширение браузера, положить туда прошлогодняя версия вашего же кода. JSON.parse на мусоре бросает SyntaxError, и если исключение случилось на старте — доска не появится вообще. Пустая страница вместо одной потерянной карточки: плохой обмен.

function loadBoard(raw) {
  if (raw === null) return []; // ключа ещё нет, первый визит

  let data;
  try {
    data = JSON.parse(raw);
  } catch (e) {
    return []; // не JSON — начинаем с чистой доски
  }

  if (!Array.isArray(data)) return [];

  return data
    .filter((item) => item && typeof item.id === "string" && typeof item.text === "string")
    .map((item) => ({ id: item.id, text: item.text, done: item.done === true }));
}

console.log(loadBoard(null).length);
console.log(loadBoard("{битая строка").length);
console.log(loadBoard(`{"id":"a1"}`).length);

const cards = loadBoard(`[{"id":"a1","text":"Кофе","done":"да"},{"text":"без id"}]`);
console.log(cards.length);
console.log(cards[0].done);

Правило простое: parse — внутрь try, результат — через проверку формы. Не валидатор на двести строк, а три вопроса: это массив? у элемента есть строковые id и text? остальное приводим к ожидаемым типам — строка "да" честно превращается в false, потому что done обязан быть булевым. Карточку без id тихо выбрасываем: остальные важнее. Когда в проекте появится TypeScript, эта же проверка станет границей, которую видит и компилятор, — это разбирает статья «Данные извне — это unknown».

Формат состояния будет меняться: сегодня карточка — строка, завтра у неё появятся срок и цвет. А в хранилище у человека лежит вчерашняя версия, и новый код обязан её пережить. Дешёвый приём — держать номер версии рядом с данными и одну функцию, которая приводит старое к текущему.

const CURRENT = 2;

function migrate(saved) {
  // v1 хранил просто массив строк
  if (Array.isArray(saved)) {
    const cards = saved.map((text, i) => ({ id: "c" + i, text, done: false }));
    return { version: CURRENT, cards };
  }
  if (saved && saved.version === CURRENT && Array.isArray(saved.cards)) return saved;
  return { version: CURRENT, cards: [] }; // из будущего или из мусора — начинаем заново
}

const fromV1 = migrate(JSON.parse(`["Кофе","Статья"]`));
console.log(fromV1.version);
console.log(fromV1.cards[1].text);
console.log(fromV1.cards[1].done);
console.log(migrate({ version: 99, cards: [1, 2, 3] }).cards.length);

Отсюда до сервера ближе, чем кажется: состояние уже отделено от DOM, уже сериализуется, уже проверяется на входе. Меняется только транспорт — вместо store.setItem будет fetch("/api/board", { method: "PUT", body: JSON.stringify(state) }). Добавятся две заботы, которых нет у локального хранилища.

Первая — работа без сети. Правка сразу ложится в локальную копию, а рядом копится очередь неотправленных изменений: не «вот вся доска», а «вот что поменялось» — отдельными операциями, которые уедут на сервер, когда появится сеть. Как устроена такая очередь операций, подробно разбирает статья «Журнал: имена и номера рождаются на телефоне». А чтобы без сети доска хотя бы открылась, её страницу, код и стили должен отдавать кеш — этим займётся следующая глава, в статье «Без сети: оболочка, запасная страница и честный onLine».

Вторая — чей вариант побеждает, если доску правили с двух устройств. Проще всего сравнить updatedAt и оставить доску посвежее, но победитель целиком затирает чужие правки. К тому же отметку ставят часы устройства, а они отстают, спешат и переводятся руками — и правка, сделанная позже, может проиграть старой. Как свести правки так, чтобы все устройства пришли к одному итогу, подробно разбирает статья «Кто прав, если оба правы: последняя запись, слияние по полям и часы».