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, оскільки є обмеження на розмір (зазвичай близько 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

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

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

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

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

Приклади

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

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