Урок 52 из 114 · 9 мин

localStorage: память браузера

localStorage setItem, getItem, removeItem, хранение объектов через JSON и sessionStorage.

Всё пропало

Пользователь заполнил список задач, случайно закрыл вкладку — и всё заново!
Бро
У меня есть маленькое хранилище для каждого сайта — localStorage. Положи туда данные, и после перезагрузки они вернутся.

Объект

localStorage

Хранилище браузера

Что это: Пары «ключ — строка», которые живут между перезагрузками, на этом сайте и в этом браузере. В песочнице курса хранилище живёт до перезапуска примера.
Зачем: Корзина, тема, черновик формы.
Как: JavaScript
localStorage.setItem("theme", "dark"); console.log(localStorage.getItem("theme"));
Так это работает

Метод

setItem() · getItem()

Положить и взять

Что это: setItem(key, value) сохраняет строку; getItem(key) возвращает её или null.
Зачем: Основные операции.
Как: JavaScript
localStorage.setItem("visits", "3"); console.log(Number(localStorage.getItem("visits")) + 1);
Так это работает

Метод

removeItem() · clear()

Удалить

Что это: removeItem(key) — одну запись, clear() — все записи сайта.
Зачем: Очистить данные после выхода.
Как: JavaScript
localStorage.setItem("draft", "текст"); localStorage.removeItem("draft"); console.log(localStorage.getItem("draft"));
Так это работает

Понятие

Объекты в хранилище

Через JSON

Что это: Хранилище держит только строки: setItem("todos", JSON.stringify(todos)), а при чтении — JSON.parse.
Зачем: Сохранить массив или объект.
Как: JavaScript
const todos = ["Позвонить", "Купить хлеб"]; localStorage.setItem("todos", JSON.stringify(todos)); console.log(JSON.parse(localStorage.getItem("todos")).length);
Так это работает

Объект

sessionStorage

Хранилище вкладки

Что это: Как localStorage, но очищается при закрытии вкладки.
Зачем: Временные данные одного визита.

Ника
Никогда не храни в localStorage пароли и токены: его читает любой скрипт на странице.

Ваш ход

Задание

Список переживёт перезагрузку

Напиши save(list) — кладёт массив в localStorage под ключом todos (как JSON), и restore() — возвращает массив из хранилища или [], если там пусто.

Пустое хранилище — пустой список — пока нет
Список сохранён как JSON — пока нет
Список восстановлен — пока нет

function save(list) {}
function restore() {
  return [];
}

function save(list) {}
function restore() {
  return [];
}

Результат обновляется при вводе

ПрактикаОбязательное задание

Строки

Выберите один ответ.

Что вернёт localStorage.getItem("n") после setItem("n", 5)?

Домашнее заданиеДля закрепления

Безопасность