Що робить localStorage?

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

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

Визначення

localStorage - це об'єкт, наданий браузером, який дозволяє зберігати пари "ключ-значення" (рядки) у постійному сховищі на боці клієнта.

Дані в localStorage:

не видаляються при оновленні сторінки,
доступні в межах домену,
і зберігаються навіть після закриття браузера.

1. Найпростіший приклад

javascript

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

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

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

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

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

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"

3. Основні методи `localStorage`

Метод	Що робить	Приклад
`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`

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

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);
});

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

5. Відмінність від `sessionStorage`

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

6. Ліміти і безпека

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

7. Реакція на зміни (між вкладками)

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

javascript

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

Підсумок

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

Запам'ятай просто: localStorage - це як "міні-база даних" у браузері, де можна зберігати налаштування, токени, історію або стан застосунку, і отримувати їх навіть після закриття вкладки.

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

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

Premium

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