Хранение данных в браузере

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

Песочница этого сайта не даёт примерам доступа к хранилищу. Попробуйте код в консоли браузера: откройте любой сайт, нажмите F12 и перейдите на вкладку Console.

Сохранить и прочитать

Метод setItem() сохраняет значение под ключом — именем, по которому его потом найдут. Метод getItem() возвращает значение по ключу:

localStorage.setItem('theme', 'dark');
 
console.log(localStorage.getItem('theme')); // dark

Если ключа нет, getItem() возвращает null.

Данные переживают перезагрузку

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

const theme = localStorage.getItem('theme') ?? 'light';
 
console.log(`Тема: ${theme}`); // Тема: dark

Оператор ?? подставляет правое значение, если левое равно null. Хранилище у каждого сайта своё: другие сайты его не видят.

Только строки

localStorage хранит только строки. Число при сохранении превратится в строку, и при чтении его нужно вернуть в число:

localStorage.setItem('visits', 5);
 
const visits = localStorage.getItem('visits');
console.log(typeof visits); // string
console.log(Number(visits) + 1); // 6

Объекты и массивы через JSON

Объект сначала превращают в строку функцией JSON.stringify(), а при чтении восстанавливают через JSON.parse():

const cart = [{ title: 'Книга', price: 12 }];
localStorage.setItem('cart', JSON.stringify(cart));
 
const saved = JSON.parse(localStorage.getItem('cart'));
console.log(saved[0].title); // Книга

Удаление

Метод removeItem() удаляет один ключ, clear() — все данные этого сайта:

localStorage.removeItem('theme');
 
console.log(localStorage.getItem('theme')); // null

sessionStorage

У localStorage есть брат — sessionStorage с теми же методами. Разница в сроке жизни: sessionStorage очищается, когда пользователь закрывает вкладку. Он подходит для временных данных, например шага в многостраничной форме:

sessionStorage.setItem('step', '2');
 
console.log(sessionStorage.getItem('step')); // 2
// localStorage хранил бы это значение и после закрытия вкладки

Частая ошибка

Сохранить объект без JSON.stringify(). Объект молча превратится в строку [object Object], и данные пропадут:

localStorage.setItem('user', { name: 'Анна' });
 
console.log(localStorage.getItem('user')); // [object Object]

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