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

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

Властивість localStorage в JavaScript надає інтерфейс для зберігання даних локально в браузері користувача. На відміну від сесійних cookies, дані, збережені за допомогою localStorage, не мають часу життя та зберігаються навіть після закриття браузера. Це робить localStorage ідеальним для зберігання інформації, необхідної для тривалого використання веб-додатками, наприклад, налаштувань користувача, інформації про стан гри, або інших даних, які потрібно зберегти між сесіями.

localStorage використовує простий ключ/значення механізм для зберігання даних, що робить його легким у використанні. Всі дані, збережені в localStorage, мають тип string. Отже, для зберігання об'єктів або масивів їх потрібно перетворити у рядковий формат, використовуючи, наприклад, JSON.stringify, а для зчитування - зворотньо перетворити за допомогою JSON.parse.

Простий приклад використання:

Зберігання та отримання простих даних:

// Зберігання даних
localStorage.setItem('name', 'Іван');

// Отримання даних
let name = localStorage.getItem('name');
console.log(name); // Виведе: Іван

Робота з об'єктами:

Для зберігання об'єктів або масивів вони перетворюються у формат JSON:

let user = {
  name: 'Іван',
  age: 30
};

// Зберігання об'єкта
localStorage.setItem('user', JSON.stringify(user));

// Отримання об'єкта
let storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Виведе: Іван

Видалення даних:

localStorage також надає методи для видалення даних:

// Видалення конкретного елемента
localStorage.removeItem('name');

// Видалення всіх даних
localStorage.clear();

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

правити

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

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

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

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

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

правити

Порада

Будьте уважні з обсягом даних, які ви зберігаєте в localStorage, оскільки є обмеження на розмір (зазвичай близько 5 МБ). Для великих об'ємів даних розгляньте інші варіанти зберігання, такі як IndexedDB.

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

Порада

Використовуйте методи localStorage.setItem('ключ', 'значення') та localStorage.getItem('ключ') для зберігання та отримання даних відповідно. Це особливо корисно для збереження налаштувань користувача або інформації між сесіями.

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

Порада

Використовуйте localStorage.clear() для видалення всіх даних, збережених в localStorage, або localStorage.removeItem('ключ') для видалення конкретного елемента. Це важливо для управління пам'яттю та приватністю даних користувача.

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

Порада

Перш ніж використовувати localStorage, переконайтеся, що він підтримується браузером користувача. Це можна зробити за допомогою if (typeof(Storage) !== "undefined") { /* Код для роботи з localStorage */ }. Це запобігає помилкам у випадку, якщо браузер не підтримує localStorage.

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

Нотатка

localStorage обмежений до приблизно 5MB даних на домен, тому важливо використовувати його ефективно.

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

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

Синтаксис

Window: localStorage property

Переглядачі

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

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

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

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

Переглядач
	4.4	18	4	3.2

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

Переглядач
	1.16

Приклади

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

<header>
  <h2 class="title">window.localStorage</h2>
  <p class="description">Зберігає дані локально у браузері користувача</p>
</header>
<main>
  <div class="result">
    <input type="text" id="dataInput" placeholder="Введіть дані тут">
    <button id="saveButton">Зберегти дані</button>
    <button id="loadButton">Завантажити збережені дані</button>
    <p>Збережені дані: <span id="savedDataDisplay">None</span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

input[type="text"] {
  margin: 10px 0;
  padding: 8px;
}

button {
  margin-right: 10px;
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

document.getElementById('saveButton').addEventListener('click', function () {
  const data = document.getElementById('dataInput').value;
  localStorage.setItem('userData', data);
  alert('Дані збережено!');
});

document.getElementById('loadButton').addEventListener('click', function () {
  const savedData = localStorage.getItem('userData');
  document.getElementById('savedDataDisplay').textContent = savedData || 'Немає збережених даних';
});
//# sourceURL=pen.js

// зберігається ЛИШЕ рядок
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('Сховище недоступне або переповнене');
}

// Зберігаємо текст у localStorage
localStorage.setItem('myText', 'Привіт, світ!');

// Відновлюємо текст
var savedText = localStorage.getItem('myText');
console.log(savedText); // Виведе: 'Привіт, світ!'

// Створюємо об'єкт
var userSettings = {
  theme: 'dark',
  notifications: true,
  language: 'uk'
};

// Зберігаємо об'єкт у localStorage
localStorage.setItem('settings', JSON.stringify(userSettings));

// Відновлюємо об'єкт
var savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings); // Виведе об'єкт з збереженими налаштуваннями