LocalStorage на пальцях


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Один з наших читачів надіслав статтю з розповіддю про 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. До речі, за його допомогою можна перевіряти, чи є у Вашому сховищі ще місце.

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

Післяслово

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

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


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

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