localStorage

JavaScriptJunior~3 хв читання

localStorage це об'єкт, який надає браузер, щоб зберігати пари «ключ, значення» у постійному сховищі на стороні клієнта. Це найпростіший спосіб тримати невеликі дані прямо в браузері користувача, щоб вони пережили перезавантаження сторінки.

Теорія

TL;DR

Дані в localStorage не видаляються при оновленні сторінки.
Вони доступні в межах одного домену (правило same-origin).
Вони зберігаються навіть після закриття браузера, поки їх не очистити вручну.
Сховище тримає тільки рядки, об'єкти треба серіалізувати через JSON.
Методи: setItem, getItem, removeItem, clear, key, плюс властивість length.
Обсяг зазвичай 5-10 МБ, чутливі дані там зберігати не можна.
Зміни в іншій вкладці того самого домену кидають подію storage.

Швидкий приклад

javascript

// Зберегти значення
localStorage.setItem('username', 'Tim');

// Прочитати значення
console.log(localStorage.getItem('username')); // "Tim"

// Видалити одне значення
localStorage.removeItem('username');

// Очистити все сховище
localStorage.clear();

Структура зберігання

localStorage зберігає все у вигляді рядків:

javascript

localStorage.setItem('count', 10);
console.log(typeof localStorage.getItem('count')); // "string"

Щоб зберігати об'єкти, треба використовувати JSON.stringify() і JSON.parse():

javascript

const user = { name: 'Tim', age: 25 };

localStorage.setItem('user', JSON.stringify(user));

const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // "Tim"

Основні методи

Метод	Що робить	Приклад
`setItem(key, value)`	Зберігає значення	`localStorage.setItem('theme', 'dark')`
`getItem(key)`	Отримує значення	`localStorage.getItem('theme')`
`removeItem(key)`	Видаляє елемент	`localStorage.removeItem('theme')`
`clear()`	Повністю очищує сховище	`localStorage.clear()`
`key(index)`	Повертає ключ за індексом	`localStorage.key(0)`
`length`	Кількість записів у сховищі	`localStorage.length`

Якщо ключа немає, getItem() повертає null, а не undefined, і це важливо для перевірок.

Приклад: збереження теми сайту

javascript

const toggle = document.querySelector('#toggle');

// При завантаженні сторінки
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark');
}

// При кліку
toggle.addEventListener('click', () => {
  document.body.classList.toggle('dark');
  const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
  localStorage.setItem('theme', theme);
});

Тепер браузер запам'ятає обрану тему, і при наступному вході користувач побачить той самий режим.

Відмінність від sessionStorage

Сховище	Живе до...	Доступне після перезавантаження	Спільне для вкладок
`localStorage`	Поки користувач сам не очистить	Так	Так (у межах одного домену)
`sessionStorage`	Поки вкладка відкрита	Ні	Ні

Ліміти, безпека і подія storage

Обсяг localStorage обмежений, зазвичай 5-10 МБ на origin.
Працює тільки з текстовими даними.
Не можна зберігати паролі, токени чи чутливу інформацію у відкритому вигляді: будь-який скрипт на сторінці, зокрема сторонній, має до них доступ.
Дані доступні тільки в тому самому origin, за правилом same-origin.
API синхронне, тому великий JSON.parse() на старті блокує головний потік.

Якщо відкрити один сайт у двох вкладках і в одній змінити localStorage, у другій спрацює подія storage:

javascript

window.addEventListener('storage', (event) => {
  console.log('Зміна в localStorage:', event.key, event.newValue);
});

Подія не спрацьовує у тій вкладці, де відбулася зміна, тільки в інших.

Підсумок

Що робить	Приклад
Зберігає дані локально	`localStorage.setItem('key', 'value')`
Не очищується при перезавантаженні	Так
Доступний з будь-якого JS у тому самому домені	Так
Зберігає тільки рядки	Використовуйте `JSON.stringify()`
Безпека	Не зберігати чутливі дані
Розмір	Близько 5 МБ

Коротко: localStorage це «міні-база даних» у браузері, де можна тримати налаштування, історію або стан застосунку і отримувати їх навіть після закриття вкладки.

Типові помилки

Класти в сховище об'єкт напряму. localStorage.setItem('user', user) збереже рядок "[object Object]", потрібен JSON.stringify().
Забувати, що все повертається рядком. localStorage.getItem('count') + 1 дасть "101", а не 11, число треба привести через Number().
Викликати JSON.parse() без try/catch. Зіпсоване або стороннє значення кине помилку і зламає завантаження сторінки.
Зберігати токени доступу. Будь-який XSS на сторінці забирає їх миттєво, для сесій краще httpOnly-cookie.
Не обробляти перевищення квоти. Коли сховище заповнене або в браузера вимкнені сайтові дані, setItem() кидає QuotaExceededError.
Плутати null і undefined. Відсутній ключ дає саме null, тому перевірка === undefined ніколи не спрацює.
Використовувати clear() замість removeItem(). clear() витирає дані всього домену, зокрема ті, що поклала інша частина застосунку.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.