Зберігання даних в локальному сховищі localStorage

36

Від автора: вітаю вас, друзі. У попередній статті ми з вами познайомилися з плагіном jQuery Cookie, який надає простий інтерфейс для роботи з куками і, відповідно, дозволяє зберігати дані в куках. У цій статті ми дізнаємося ще про один спосіб зберігання даних, мова йде про локальному сховищі localStorage.

Отже, об’єкт localStorage є глобальним об’єктом, в якому нам доступно цілих 5 Мб місця, тобто записати туди ми можемо дуже-дуже багато різних даних. При цьому ці дані будуть зберігатися як завгодно довго. Це дуже зручно.

Для роботи з об’єктом нам пропонується деякий набір методів:

setItem() — запис у сховищі;

getItem() — отримання даних їх localStorage;

removeItem() — видалення конкретних даних;

clear() — очищення сховища повністю.

Робота з представленими методами дуже схожа на роботу з куками в попередній статті. Давайте спробуємо щось записати у сховище.

localStorage.setItem(‘name’, ‘Andrey’);

Тепер подивимося в консолі на вміст сховища:

Хранение данных в локальном хранилище localStorage

Як бачимо, в сховище записалася змінна (ключ, властивість) name з потрібним значенням. Без проблем можемо записати ще щось:

localStorage.setItem(‘name’, ‘Andrey’);
localStorage.setItem(‘name2’, ‘John’);

Тепер ми записали в об’єкт localStorage вже кілька властивостей. Давайте роздрукуємо сам об’єкт і переконаємося, що властивості там є:

console.log(localStorage);

Хранение данных в локальном хранилище localStorage

Отримати дані зі сховища можна кількома способами. По-перше, для отримання даних можна використовувати метод getItem(), передаючи як параметр потрібний ключ.

console.log( localStorage.getItem(‘name’) );

Також можемо використовувати синтаксис роботи з масивами, звертаючись ось так:

console.log( localStorage[‘name’] );

Ну і можемо звернутися до властивості об’єкта наступним чином:

console.log( localStorage.name );

Всі три рядки коду виведуть одне і те ж значення.

Хранение данных в локальном хранилище localStorage

Як бачимо, нічого складного в збереженні даних немає. Якщо які-небудь дані нам не потрібні, ми можемо видалити їх по ключу, звернувшись до методу removeItem().

localStorage.removeItem(‘name’);

Якщо ж нам потрібно повністю очистити сховище, тоді на допомогу приходить метод clear:

localStorage.clear();

Після цієї команди сховище стане абсолютно порожнім, як на початку роботи:

Хранение данных в локальном хранилище localStorage

На цьому ми завершимо цю статтю. Вихідні коди до статті ви можете завантажити за посиланням. Більше про JavaScript, jQuery ви можете дізнатися з наших уроків або курсу. Удачі!