Web Storage API: примеры использования

Доброго времени суток, друзья!

В данной статье мы рассмотрим парочку примеров использования Web Storage API или объекта «Storage».

Что конкретно мы будем делать?

• Научимся запоминать время воспроизведения видео.
• Поработаем с формой входа на страницу.
• Напишем логику списка задач (todo list).
• Схематично набросаем корзину для товаров.

Итак, поехали.

Краткий обзор

Объект «Storage» используется для хранения данных на стороне клиента и в этом смысле выступает альтернативой cookies. Преимущество Storage состоит в размере хранилища (от 5 Мб, зависит от браузера, при превышении лимита выбрасывается ошибка «QUOTA_EXCEEDED_ERR») и отсутствии необходимости обращаться к серверу. Существенный недостаток — безопасность: стоит вредоносному скрипту получить доступ к странице, и пиши пропало. Поэтому крайне не рекомендуется хранить в Storage конфиденциальную информацию.

Справедливости ради стоит отметить, что на сегодняшний день существуют более продвинутые решения для хранения данных на стороне клиента — это IndexedBD, Service Workers + Cache API и др.

О сервис-воркерах можно почитать здесь.

Web Storage API включает в себя localStorage и sessionStorage. Разница между ними состоит во времени хранения данных. В localStorage данные хранятся постоянно до их «явного» удаления (ни перезагрузка страницы, ни ее закрытие не приводят к удалению данных). Время хранения данных в sessionStorage, как следует из названия, ограничено сессией браузера. Поскольку sessionStorage на практике почти не используется, мы будет рассматривать только localStorage.

Что необходимо знать о localStorage?

• При использовании localStorage создается представление объекта «Storage».
• Данные в localStorage хранятся в виде пар ключ/значение.
• Данные хранятся в виде строк.
• Данные не сортируются, что иногда приводит к их перемешиванию (в чем мы убедимся на примере списка задач).
• При включении в браузере режима инкогнито или приватного режима использование localStorage может стать невозможным (зависит от браузера).

localStorage обладает следующими методами:

• Storage.key(n) — имя ключа с индексом n
• Storage.getItem() — получить элемент
• Storage.setItem() — записать элемент
• Storage.removeItem() — удалить элемент
• Storage.clear() — очистить хранилище
• Storage.length — длина хранилища (количество элементов — пар ключ/значение)

В спецификации это выглядит так:

interface Storage {     readonly attribute unsigned long length;     DOMString? key(unsigned long index);     getter DOMString? getItem(DOMString key);     setter void setItem(DOMString key, DOMString value);     deleter void removeItem(DOMString key);     void clear(); }; 

Данные в хранилище записываются одним из следующих способов:

localStorage.color = 'deepskyblue' localStorage[color] = 'deepskyblue' localStorage.setItem('color', 'deepskyblue') // рекомендуется использовать этот способ 

Получить данные можно так:

localStorage.getItem('color') localStorage['color'] 

Как перебрать ключи хранилища и получить значения?

// способ 1 for (let i = 0; i < localStorage.length; i++) {     let key = localStorage.key(i)     console.log(`${key}: ${localStorage.getItem(key)}`) }  // способ 2 let keys = Object.keys(localStorage) for (let key of keys) {     console.log(`${key}: ${localStorage.getItem(key)}`) } 

Как мы отмечали выше, данные в хранилище имеют строковый формат, поэтому с записью объектов возникают некоторые трудности, которые легко решаются с помощью тандема JSON.stringify() — JSON.parse():

localStorage.user = {     name: 'Harry' } console.dir(localStorage.user) // [object Object]  localStorage.user = JSON.stringify({     name: 'Harry' }) let user = JSON.parse(localStorage.user) console.dir(user.name) // Harry 

Для взаимодействием с localStorage существует специальное событие — storage (onstorage), которое возникает при записи/удалении данных. Оно имеет следующие свойства:

• key — ключ
• oldValue — старое значение
• newValue — новое значение
• url — адрес хранилища
• storageArea — объект, в котором произошло изменение

В спецификации это выглядит так:

[Constructor(DOMString type, optional StorageEventInit eventInitDict)]     interface StorageEvent : Event {     readonly attribute DOMString? key;     readonly attribute DOMString? oldValue;     readonly attribute DOMString? newValue;     readonly attribute DOMString url;     readonly attribute Storage? storageArea; };  dictionary StorageEventInit : EventInit {     DOMString? key;     DOMString? oldValue;     DOMString? newValue;     DOMString url;     Storage? storageArea; }; 

Допускает ли localStorage прототипирование?

Storage.prototype.removeItems = function() {     for (item in arguments) {         this.removeItem(arguments[item])     } }  localStorage.setItem('first', 'some value') localStorage.setItem('second', 'some value')  localStorage.removeItems('first', 'second')  console.log(localStorage.length) // 0 

Как проверить наличие данных в localStorage?

// способ 1 localStorage.setItem('name', 'Harry')  function isExist(name) {     return (!!localStorage[name]) }  isExist('name') // true  // способ 2 function isItemExist(name) {     return (name in localStorage) }  isItemExist('name') // true 

В браузере localStorage можно найти здесь:

Довольно слов, пора переходить к делу.

Примеры использования

Запоминаем время воспроизведения видео

window.onload = () => {     // находим элемент <video>     let video = document.querySelector('video')          // если localStorage содержит значение currentTime (текущее время), присваиваем это значение video.currentTime     if(localStorage.currentTime) {         video.currentTime = localStorage.currentTime     }          // при каждом изменении video.currentTime, записываем его значение в localStorage.currentTime     video.addEventListener('timeupdate', () => localStorage.currentTime = video.currentTime) } 

Результат выглядит так:

Запускаем видео и останавливаем воспроизведение на третьей секунде, например. Время, на котором мы остановились, хранится в localStorage. Чтобы в этом убедиться, перезагружаем или закрываем/открываем страницу. Видим, что текущее время воспроизведения видео остается прежним.

Codepen

Github

Работаем с формой для входа

Разметка выглядит так:

<form>     Login: <input type="text">     Password: <input type="text">     <input type="submit"> </form> 

У нас имеется форма и три «инпута». Для пароля мы используем <input type = «text»>, поскольку если использовать правильный тип (password), Chrome будет пытаться сохранять введенные данные, что помешает нам реализовать собственный функционал.

JavaScript:

// находим форму и инпуты для ввода логина и пароля let form = document.querySelector('form') let login = document.querySelector('input') let password = document.querySelector('input + input')  // если localStorage не пустой // получаем из него необходимые данные // и присваиваем их инпутам if (localStorage.length != 0) {     login.value = localStorage.login     password.value = localStorage.password }  // вешаем на форму обработчик события "submit" form.addEventListener('submit', () => {     // записываем введенные пользователем данные в localStorage     localStorage.login = login.value     localStorage.password = password.value          // если пользователем введены hello и world в качестве логина и пароля, соответственно     // используем древний метод для вывода сообщения "welcome" на страницу     if (login.value == 'hello' && password.value == 'world') {         document.write('welcome')     } }) 

Мы не «валидируем» форму, потому что наша цель — изучить возможности localStorage. Отсутствие валидации, в частности, позволяет записывать пустые строки в качестве логина и пароля.

Результат выглядит так:

Вводим волшебные слова.

Данные записываются в localStorage, а на страницу выводится приветствие.

Codepen

Github

Пишем логику списка задач

Разметка выглядит так:

<input type="text"><button class="add">add task</button><button class="clear">clear storage</button>  <ul></ul> 

У нас имеется «инпут» для ввода задачи, кнопка для добавления задачи в список, кнопка для очистки списка и хранилища и контейнер для списка.

JavaScript:

// находим инпут и фокусируемся на нем let input = document.querySelector('input') input.focus() // находим кнопку для добавления задачи в список let addButton = document.querySelector('.add') // находим контейнер для списка let list = document.querySelector('ul')  // если в localStorage имеются данные if (localStorage.length != 0) {     // цикл по количеству пар ключ/значение     for (let i = 0; i < localStorage.length; i++) {         let key = localStorage.key(i)         // получаем шаблон - элемент списка         let template = `${localStorage.getItem(key)}`         // помещаем задачу в список         list.insertAdjacentHTML('afterbegin', template)     }          // находим все кнопки с классом "close" - галочки для выполненных задач     document.querySelectorAll('.close').forEach(b => {         // для каждой кнопки         b.addEventListener('click', e => {             // получаем родительский элемент "li"             let item = e.target.parentElement             // удаляем задачу из списка             list.removeChild(item)             // удаляем данные из localStorage             localStorage.removeItem(`${item.dataset.id}`)         })     }) }  // возможность добавления задачи в список при нажатии клавиши "Enter" window.addEventListener('keydown', e => {     if (e.keyCode == 13) addButton.click() })  // вешаем на кнопку для добавления задачи в список обработчик события "клик" addButton.addEventListener('click', () => {     // получаем строку - задачу     let text = input.value     // формируем шаблон, запись и идентификация значений по ключам осуществляется через атрибут "data-id"     let template = `<li data-id="${++localStorage.length}"><button class="close">V</button><time>${new Date().toLocaleDateString()}</time> <p>${text}</p></li>`     // добавляем шаблон - задачу в список     list.insertAdjacentHTML('afterbegin', template)     // записываем данные в localStorage     localStorage.setItem(`${++localStorage.length}`, template)     // сбрасываем значение инпута     input.value = ''      // вешаем на кнопку для удаления задачи из списка обработчик события "клик"     document.querySelector('.close').addEventListener('click', e => {         // получаем элемент списка - родительский элемент кнопки         let item = e.target.parentElement         // удаляем задачу из списка         list.removeChild(item)         // удаляем данные из localStorage         localStorage.removeItem(`${item.dataset.id}`)     }) })  // вешаем на кнопку для очистки обработчик события "клик" document.querySelector('.clear').onclick = () => {     // очищаем хранилище     localStorage.clear()     // удаляем задачи из списка     document.querySelectorAll('li').forEach(item => list.removeChild(item))     // фокусируемся на инпуте     input.focus() } 

Результат выглядит так:

Задачи, добавляемые в список, сохраняются в localStorage в виде готовой разметки. При перезагрузке страницы список формируется из данных хранилища (имеет место перемешивание, о котором упоминалось выше).

Удаление задачи из списка посредством нажатия зеленой галочки приводит к удалению соответствующей пары ключ/значение из хранилища.

Codepen

Github

Схема корзины для товаров

Мы не преследуем цель создать полнофункциональную корзину, поэтому код будет написан «в старом стиле».

Разметка одного товара выглядит так:

<div class="item">     <h3 class="title">Item1</h3>     <img src="http://placeimg.com/150/200/tech" alt="#">     <p>Price: <span class="price">1000</span></p>     <button class="add" data-id="1">Buy</button> </div> 

У нас имеется контейнер для товара, наименование, изображение и цена товара, а также кнопка для добавления товара в корзину.

Также у нас имеется контейнер для кнопок отображения содержимого корзины и очистки корзины и хранилища и контейнер для корзины.

<div class="buttons">     <button id="open">Cart</button>     <button id="clear">Clear</button> </div> <div id="content"></div> 

JavaScript:

// находим товары и корзину let itemBox = document.querySelectorAll('.item'),     cart = document.getElementById('content');  // получаем данные из localStorage function getCartData() {     return JSON.parse(localStorage.getItem('cart')); }  // записываем данные в хранилище function setCartData(o) {     localStorage.setItem('cart', JSON.stringify(o)); }  // добавление товара в корзину function addToCart() {     // блокируем кнопку на время работы с корзиной     this.disabled = true;     // получаем данные из корзины или создаем новый объект, если данные отсутствуют     let cartData = getCartData() || {},         // родительский элемент кнопки "Buy"         parentBox = this.parentNode,         // id товара         itemId = this.getAttribute('data-id'),         // название товара         itemTitle = parentBox.querySelector('.title').innerHTML,         // стоимость товара         itemPrice = parentBox.querySelector('.price').innerHTML;     // +1 к товару     if (cartData.hasOwnProperty(itemId)) {         cartData[itemId][2] += 1;     } else {         // + товар         cartData[itemId] = [itemTitle, itemPrice, 1];     }     // обновляем данные в localStorage     if (!setCartData(cartData)) {         // снимаем блокировку кнопки         this.disabled = false;     } }  // устанавливаем обработчик события "клик" на каждую кнопку "Buy" for (let i = 0; i < itemBox.length; i++) {     itemBox[i].querySelector('.add').addEventListener('click', addToCart) }  // содержимое корзины function openCart() {     // получаем данные из хранилища     let cartData = getCartData(),         totalItems = '',         totalGoods = 0,         totalPrice = 0;     // формируем данные для вывода     if (cartData !== null) {         totalItems = '<table><tr><th>Name</th><th>Price</th><th>Amount</th></tr>';         for (let items in cartData) {             totalItems += '<tr>';             for (let i = 0; i < cartData[items].length; i++) {                 totalItems += '<td>' + cartData[items][i] + '</td>';             }             totalItems += '</tr>';             totalGoods += cartData[items][2];             totalPrice += cartData[items][1] * cartData[items][2];         }         totalItems += '</table>';         cart.innerHTML = totalItems;         cart.append(document.createElement('p').innerHTML = 'Goods: ' + totalGoods + '. Price: ' + totalPrice);     } else {         // если в корзине пусто         cart.innerHTML = 'empty';     } } // открываем корзину document.getElementById('open').addEventListener('click', openCart);  // очищаем корзину document.getElementById('clear').addEventListener('click', () => {     localStorage.removeItem('cart');     cart.innerHTML = 'сleared'; }); 

Результат выглядит так:

Выбранные товары записываются в хранилище в виде одной пары ключ/значение.

При нажатии кнопки «Cart» данные из localStorage выводятся в таблицу, подсчитывается общее количество товаров и их стоимость.

Codepen

Github

Благодарю за внимание.