LocalStorage на пальцях


Один з наших читачів прислав статтю з розповіддю про HTML5 LocalStorage у браузерах. Передаємо йому слово.

Я постарався написати найпростіше і зрозуміліше керівництво по використанню технології localStorage. Стаття вийшла зовсім невеликою, внаслідок того, що і сама технологія і засоби роботи з нею не несуть нічого складного. Для старту вам досить трохи знати JavaScript. Отже, приділите цій статті 10 хвилин і ви сміливо зможете додати собі в резюме рядок “умію працювати з localStorage”.

Що таке localStorage?

Так виглядає JavaScript об’єкт:

var myCar ={ wheels: 4, doors: 4, engine: 1, name: " Jaguar"}

А так виглядає JSON. Майже так само як звичайний js- об’єкт, тільки усі властивості мають бути поміщені в лапки.

{ "firstName": " Іван", " lastName": " Іванов", " address": { "streetAddress": "Московське ш., 101, кв.101", " city": " Ленінград", " postalCode": 101101 }, "phoneNumbers": [ "812 123-1234", "916 123-4567" ]}

Щоб зрозуміти, що таке localStorage, просто уявіть, що десь у вас у браузері вбудований такий об’єкт, яким ми можемо користуватися. При цьому цей об’єкт не очищає значення, які ми туди запишемо, якщо ми перезавантажимо сторінку або навіть зовсім закриємо браузер.

Якщо говорити мовою JavaScript, то localStorage ця властивість глобального об’єкту браузеру (window). До нього можна звертатися як window.localStorage або просто localStorage.

Ще варто сказати, що у браузеру існує клон localStorage, який називається sessionStorage. Їх різниця тільки в тому, що останній зберігає дані тільки для однієї вкладки (сесії) і просто очистить свій простір як тільки ми закриємо вкладку

Давайте подивимося на нього живцем. Наприклад, в Google Chrome вам потрібно відкрити DevTools (F12), перейти на вкладку ” Resourses” і на лівій панелі ви побачите localStorage для цього домена і усі значення, що воно містить.

До речі, ви повинні знати як localStorage працює з доменами. Для кожного домена ваш браузер створює свій об’єкт localStorage, і редагувати або переглядати його можна тільки на цьому домені. Наприклад, з домена mydomain - 1.com не можна отримати доступ до localStorage вашого mydomain - 2.com.

Навіщо мені потрібний localStorage?

LocalStorage потрібний тільки для одного – зберігати певні дані між сесіями користувача. Можна придумати тисячу і одну річ, яку можна зберігати в локальному сховищі браузеру. Наприклад, браузерные ігри, які використовують його як сохраненку, або записати момент, на якому користувач зупинився при перегляді відео, різні дані для форм і так далі

Як мені почати працювати з localStorage?

Дуже просто.

Робота з localStorage дуже нагадує роботу з об’єктами в JavaScript. Існує декілька методів для роботи з ним.

localStorage.setItem ('ключ', 'значення')

Метод який додає в localStorage новий ключ зі значенням (а якщо такий ключ вже існує, то перезаписує новим значенням). Пишемо, наприклад, localStorage.setItem (‘myKey’, ‘myValue’);

localStorage.getItem ('ключ')

Беремо певне значення з сховища по ключу.

localStorage.removeItem ("Ключ")

Видаляємо ключ

localStorage.clear ()

Очищаємо усе сховище

Зараз ви можете відкрити вкладку з localStorage вашого браузеру і самостійно потренуватися записувати і витягати дані з цього сховища. Якщо що – увесь код пишемо в js- файл.

//Додаємо або змінюємо значення: localStorage.setItem ('myKey', 'myValue'); //тепер у вас в localStorage зберігається ключ " myKey" cо значенням " myValue"//Выводм його в консоль: var localValue = localStorage.getItem ('myKey');console.log (localValue); //"myValue"//видаляємо: localStorage.removeItem ("myKey");//очищаємо усе хранилищеlocalStorage.clear () Те ж саме, тільки з квадратними дужками: localStorage["Ключ"] = "Значення" //установка значенияlocalStorage["Ключ"] // Отримання значенияdelete localStorage["Ключ"] // Видалення значення

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

//створимо объектvar obj ={ item1: 1, item2: [123, " two", 3.0], item3:" hello"};
var serialObj = JSON.stringify (obj); //сериализуем егоlocalStorage.setItem ("myKey", serialObj); //запишемо його в сховищі по ключу " myKey" var returnObj = JSON.parse (localStorage.getItem ("myKey"))  //спарсим його назад об'єкт

Ви також повинні знати, що браузери виділяють 5мб під localStorage. І якщо ви його перевищите – отримаєте виключення QUOTA_EXCEEDED_ERR. До речі, c його допомогою можна перевіряти чи є у вашому сховищі ще місце.

try { localStorage.setItem ('ключ', 'значення');} catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert ('Перевищений ліміт'); }}

Замість укладення

Мені б хотілося, щоб з цієї невеликої статті розробники зробили для себе простий висновок, що ця технологія вже щосили може використовуватися у вас на проектах. У неї хороша стандартизація і відмінна підтримка, яка з часом тільки розвивається.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *