JS властивість Object.localStorage

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

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

Порада:	Використовуйте методи `localStorage.setItem('ключ', 'значення')` та `localStorage.getItem('ключ')` для зберігання та отримання даних відповідно. Це особливо корисно для збереження налаштувань користувача або інформації між сесіями.
Порада:	Використовуйте `localStorage.clear()` для видалення всіх даних, збережених в `localStorage`, або `localStorage.removeItem('ключ')` для видалення конкретного елемента. Це важливо для управління пам'яттю та приватністю даних користувача.
Порада:	Будьте уважні з обсягом даних, які ви зберігаєте в `localStorage`, оскільки є обмеження на розмір (зазвичай близько 5 МБ). Для великих об'ємів даних розгляньте інші варіанти зберігання, такі як IndexedDB.
Порада:	Перш ніж використовувати `localStorage`, переконайтеся, що він підтримується браузером користувача. Це можна зробити за допомогою `if (typeof(Storage) !== "undefined") { /* Код для роботи з localStorage */ }`. Це запобігає помилкам у випадку, якщо браузер не підтримує `localStorage`.
Нотатка:	`localStorage` обмежений до приблизно 5MB даних на домен, тому важливо використовувати його ефективно.

Синтаксис

Window: localStorage property

Значення

Return

Переглядачі

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

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

Переглядач
	-	-

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/JjxxRWR">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

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

У цьому прикладі ми використовуємо localStorage для збереження JavaScript об'єкту. Для цього спочатку перетворюємо об'єкт у JSON-рядок за допомогою JSON.stringify(), а потім зчитуємо і перетворюємо назад у об'єкт за допомогою JSON.parse(). Цей метод є корисним для зберігання складніших структур даних.

// Створюємо об'єкт
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); // Виведе об'єкт з збереженими налаштуваннями

JS довідник

JavaScript

Наповнення JS розділу