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

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

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

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

Контент

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

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

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

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

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

`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` - це як "міні-база даних" у браузері,
> де можна зберігати налаштування, токени, історію або стан застосунку,
> і отримувати їх навіть після закриття вкладки.

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

Для рев’юера

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

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