JavaScript localStorage — постійне сховище браузера

localStorage зберігає дані в браузері назавжди — вони переживають і перезавантаження, і закриття браузера.

правити

Загальний опис

Зберігає лише рядки. Число 42 перетвориться на '42', а об'єкт — на безглузде '[object Object]'. Тому об'єкти кладуть через JSON.stringify(), а дістають через JSON.parse().

Обсяг обмежений — близько 5 МБ на домен. Спроба перевищити кидає помилку, тож запис великих даних варто загортати в try...catch.

І найважливіше: доступ синхронний. Читання блокує головний потік. Класти туди мегабайти й читати їх на кожен кадр — прямий шлях до гальм.

У приватному режимі сховище може бути недоступним узагалі — код має це переживати.

правити

Нотатка

Ніколи не зберігай тут токени й паролі. Будь-який скрипт на сторінці читає localStorage без перешкод — одна XSS-вразливість, і дані користувача пішли.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
localStorage	4+	3.5+	4+	10.5+	12+	8+

Підтримка: мобільні переглядачі

Переглядач
localStorage	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

// зберігається ЛИШЕ рядок
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme')); // 'dark'

// об'єкт — через JSON
localStorage.setItem('user', JSON.stringify({ name: 'Іван', id: 1 }));
const user = JSON.parse(localStorage.getItem('user'));

// немає ключа — null, а не помилка
console.log(localStorage.getItem('missing')); // null

localStorage.removeItem('theme');

// у приватному режимі може кинути помилку
try {
    localStorage.setItem('big', hugeString);
} catch {
    console.warn('Сховище недоступне або переповнене');
}