Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «localStorage». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`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()` витирає дані всього домену, зокрема ті, що поклала інша частина застосунку.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати685 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.