localStorage и JSON

Введение

После обработки форм — сохранение данных: localStorage хранит их в браузере между сессиями. JSON — формат для сериализации объектов и массивов.

Задачи

• Сохранять и читать данные в localStorage (setItem, getItem, removeItem).
• Сериализовать объекты и массивы через JSON.stringify и JSON.parse.
• Сохранять состояние приложения в браузере между сессиями.

localStorage

localStorage — встроенное хранилище браузера. Данные сохраняются по ключу и остаются после закрытия вкладки и перезагрузки страницы. Объём ограничен (обычно несколько мегабайт на домен), данные привязаны к домену сайта — другой сайт их не видит.

Основные методы

localStorage.setItem("key", "value");
const val = localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();

• setItem("ключ", "значение") — сохраняет строку под указанным ключом. Если ключ уже есть, значение перезаписывается.
• getItem("ключ") — возвращает строку или null, если ключа нет.
• removeItem("ключ") — удаляет пару по ключу.
• clear() — удаляет все данные сайта из localStorage.

JSON

JSON (JavaScript Object Notation) — текстовый формат обмена данными. В JavaScript объекты и массивы можно превратить в JSON-строку и обратно. Это нужно, чтобы сохранить структурированные данные в localStorage или отправить на сервер.

stringify и parse

const obj = { a: 1, b: 2 };
const str = JSON.stringify(obj);
const parsed = JSON.parse(str);

• JSON.stringify(объект) — превращает объект или массив в строку. Вложенные объекты и массивы тоже сериализуются.
• JSON.parse(строка) — превращает JSON-строку обратно в объект или массив. Если строка невалидна, будет ошибка.

Пример: JSON.stringify({ name: "Анна", age: 14 }) даёт строку '{"name":"Анна","age":14}'. После JSON.parse(...) снова получим объект.

Сохранение объектов

Чтобы сохранить объект или массив в localStorage, сначала преобразуй его в строку через JSON.stringify, при чтении — обратно через JSON.parse.

Запись и чтение

localStorage.setItem("user", JSON.stringify({ name: "Анна", score: 100 }));
const user = JSON.parse(localStorage.getItem("user"));

При чтении нужно учитывать, что ключа может не быть: getItem вернёт null, и JSON.parse(null) вызовет ошибку. Безопасный вариант:

const saved = localStorage.getItem("user");
const user = saved ? JSON.parse(saved) : { name: "Гость", score: 0 };

Так мы получаем объект: либо сохранённый ранее, либо значение по умолчанию.

Пример: сохранение настроек

Пользователь вводит имя в форму; при следующем визите поле подставляется из localStorage:

const input = document.querySelector("#username");
const savedName = localStorage.getItem("username");
if (savedName) {
  input.value = savedName;
}
input.addEventListener("input", function() {
  localStorage.setItem("username", input.value

Блок-схема localStorage с объектами

Подведём итоги

localStorage и JSON позволяют сохранять данные в браузере. На следующем уроке — проект «Шифр Цезаря».

Типичные ошибки

• Забывать, что localStorage хранит только строки, — объект сохранится некорректно без JSON.stringify.
• Забывать JSON.parse при чтении — вместо объекта придёт строка.
• Ожидать, что данные из localStorage будут доступны на другом домене, — другой сайт их не увидит.
• Не обрабатывать случай отсутствующего ключа — при неверной обработке null код завершится ошибкой.

Домашнее задание

Упражнение №1

Форма с именем. При отправке сохраняй в localStorage. При загрузке страницы — подставляй сохранённое имя в поле.

Упражнение №2

Сохраняй рейтинг квиза в localStorage: массив объектов {name, score}. При загрузке — показывай таблицу лидеров.

Упражнение №3

Черновик: при вводе в textarea сохраняй каждые 2 секунды. При загрузке — восстанавливай.