Веб-хранилище
Строка читается saved / lida / tea. На этой странице записаны гость lida и напиток tea. Браузер держит короткую заметку для этого сайта. localStorage остаётся после закрытия.
Это не страница шаблонов
Cookie ждут следующей страницы. Хранилище не прицеплено к каждому запросу, который шлёт браузер. Отсутствующий ключ ничего не бросает: getItem возвращает null. Страница шаблонов закончилась на true / Order: mint.
Число тоже становится текстом
setItem пишет под ключом, getItem читает. Число сохраняется как текст.
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
После перезагрузки getItem("drink") по-прежнему tea. setItem("count", 2) кладёт символы 2, не число. В журнале сначала tea, потом null: size никто не записывал.
Объект едет текстом
JSON.parse(null) бросает ошибку, поэтому сначала прочитай значение и пропусти разбор, если там null. JSON.stringify делает текст, который можно сохранить, а JSON.parse собирает объект снова. Обычный объект, переданный в setItem, превращается в текст [object Object].
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
Журнал показывает lida / tea. Любая страница того же источника может прочитать этот ключ. Ключ w3-order хранит текст, а разобранное значение снова объект.
Вкладка или весь браузер
Не вызывай clear ради уборки одного заказа: он удаляет все ключи этого источника. removeItem удаляет один ключ. У sessionStorage те же три метода, и оно живёт, пока эта вкладка не закроется. localStorage на месте, когда браузер открывается снова.
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
Закрытие вкладки роняет только сессионную заметку. Ключ w3-order из localStorage есть в обеих вкладках. Вторая вкладка не видит тот ключ sessionStorage. Сначала mint, затем null.
Один источник на все страницы
Чужой сайт ящик не читает. Ключ, поставленный на главной, виден на странице заказа того же сайта. Схема, хост и порт делят один ящик. Это не ящик одного файла.
Что показывает страница
Страница записывает заказ, читает его обратно и показывает гостя и напиток.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
true / Order: mint была страница шаблонов. Перезагрузи — те же слова вернутся из localStorage. Строка читается saved / lida / tea.
Пять коротких шагов
- Через setItem поставь drink в tea. getItem вернёт tea.
- Запроси size через getItem. Ответ null.
- Сохрани заказ через JSON.stringify. После JSON.parse журнал — lida / tea.
- Положи mint в sessionStorage, затем removeItem. getItem вернёт null.
- Прочитай страницу. Строка — saved / lida / tea.
Где ошибаются
Хранилище помнит строки, не живые объекты. clear — весь источник, не один ключ.
- Передать объект и потом прочитать [object Object]
- Вызвать JSON.parse на null
- Ждать, что sessionStorage переживёт новую вкладку
- Вызвать clear и стереть все ключи
- Прочитать строку как true / Order: mint
Оставь это
- setItem и getItem хранят и читают строки
- отсутствующий ключ — это null
- объекты входят через JSON.stringify и выходят через JSON.parse
- localStorage переживает перезапуск
- sessionStorage кончается вместе со вкладкой
- строка страницы — saved / lida / tea
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху