localStorage и JSONПосле обработки форм — сохранение данных: localStorage хранит их в браузере между сессиями. JSON — формат для сериализации объектов и массивов.
localStorage (setItem, getItem, removeItem).JSON.stringify и JSON.parse.localStoragelocalStorage — встроенное хранилище браузера. Данные сохраняются по ключу и остаются после закрытия вкладки и перезагрузки страницы. Объём ограничен (обычно несколько мегабайт на домен), данные привязаны к домену сайта — другой сайт их не видит.
localStorage.setItem("key", "value");
const val = localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();setItem("ключ", "значение") — сохраняет строку под указанным ключом. Если ключ уже есть, значение перезаписывается.getItem("ключ") — возвращает строку или null, если ключа нет.removeItem("ключ") — удаляет пару по ключу.clear() — удаляет все данные сайта из localStorage.JSON (JavaScript Object Notation) — текстовый формат обмена данными. В JavaScript объекты и массивы можно превратить в JSON-строку и обратно. Это нужно, чтобы сохранить структурированные данные в localStorage или отправить на сервер.
stringify и parseconst 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 код завершится ошибкой.Форма с именем. При отправке сохраняй в localStorage. При загрузке страницы — подставляй сохранённое имя в поле.
Сохраняй рейтинг квиза в localStorage: массив объектов {name, score}. При загрузке — показывай таблицу лидеров.
Черновик: при вводе в textarea сохраняй каждые 2 секунды. При загрузке — восстанавливай.