Статьи

HTML5 Web Storage

Февраль 11, 2019

Одной из причин того, что некоторые технократы предпочитают нативные приложения, является их способность хранить данные локально на клиенте. HTML5 сделал прорыв, позволив веб-приложениям хранить данные в браузере.

Хотя файлы cookie доступны для хранения данных в браузерах, у них есть определенные недостатки, которые были устранены с помощью изобретения HTML5 Web Storage.

Недостатки файлов cookie

  • Лимит хранения файлов cookie в веб-браузерах ограничен примерно 4 КБ.
  • Файлы cookie отправляются с каждым HTTP-запросом, что снижает производительность веб-приложения.

Что такое HTML5 Web Storage?

Это простая клиентская база данных, которая позволяет пользователям сохранять данные в форме пар ключ / значение.

Он имеет довольно простой API для извлечения / записи данных в локальное хранилище. Он может хранить до 10 МБ данных на домен. В отличие от файлов cookie, сохраненные данные не включаются в каждый HTTP-запрос.

IE7 и более старые версии не поддерживают веб-хранилище. Все остальные браузеры, такие как Chrome, Opera, Firefox, Safari и IE8 +, поддерживают веб-хранилище.

Типы веб-хранилищ

Локальное хранилище: хранит данные без срока годности. Данные будут доступны, даже если вкладка браузера / просмотра закрыта или открыта снова.

Хранение сеанса: хранит данные за один сеанс. Сохраненные данные будут удалены, как только пользователь закроет браузер.

В обоих случаях обратите внимание, что данные веб-хранилища не будут доступны между различными браузерами.

пример

Давайте непосредственно погрузимся в пример, чтобы лучше понять HTML5 Web Storage.

Мы создадим простую веб-страницу настроек пользователя, которая позволит нам изменять цвет фона страницы и размер шрифта заголовка. 

</pre> <section><form onsubmit="javascript:setSettings()"><label>Select your BG color: </label> <input id="favcolor" type="color" value="#ffffff" /> <label>Select Font Size: </label> <input id="fontwt" type="number" max="14" min="10" value="13" /> <input type="submit" value="Save" /> <input onclick="clearSettings()" type="reset" value="Clear" /></form></section> <pre>

Функция setSettings которая вызывается из события onsubmit формы, позволит нам сохранить выбранные пользователем данные в локальном хранилище.

Прежде чем использовать HTML5 Web Storage для хранения данных, мы должны проверить, поддерживает ли браузер хранилище HTML5 или нет.

Мы могли бы использовать API по умолчанию или Modernizr для проверки совместимости браузера. 

 function setSettings() { if ('localStorage' in window && window['localStorage'] !== null) { //use localStorage object to store data } else { alert('Cannot store user preferences as your browser do not support local storage'); } }

Modernizr — это библиотека JavaScript, которая помогает нам определять поддержку браузером функций HTML5 и CSS. Загрузите последнюю версию Modernizr и включите библиотеку в элемент script. 

 <script type="text/javascript" src="modernizr.min.js"></script> if (Modernizr.localstorage) { //use localStorage object to store data } else { alert('Cannot store user preferences as your browser do not support local storage'); }

setItem('key','value') позволяет нам записывать данные в локальное хранилище.

Исключение QUOTA_EXCEEDED_ERR будет QUOTA_EXCEEDED_ERR , если ограничение хранилища превысит 5 МБ. Поэтому всегда лучше добавлять блоки try / catch в код хранилища при сохранении данных. 

 function setSettings() { if ('localStorage' in window && window['localStorage'] !== null) { try { var favcolor = document.getElementById('favcolor').value; var fontwt = document.getElementById('fontwt').value; localStorage.setItem('bgcolor', favcolor); localStorage.fontweight = fontwt; } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert('Quota exceeded!'); } } } else { alert('Cannot store user preferences as your browser do not support local storage'); } }

Мы можем проверить, хранятся ли данные в локальном хранилище, используя инструменты разработчика, которые поставляются с браузерами. Например, в Chrome щелкните правой кнопкой мыши браузер и выберите «Проверить элемент». Выберите вкладку «Ресурсы», а затем нажмите на локальный элемент хранения Мы можем видеть выбранные пользователем данные, хранящиеся в виде пар ключ / значение.

Веб-страница может быть перезагружена с заданными пользователем значениями фона и размера шрифта. getItem('Key') помогает в извлечении данных, хранящихся в базе данных. 

 function applySetting() { if (localStorage.length != 0) { document.body.style.backgroundColor = localStorage.getItem('bgcolor'); document.body.style.fontSize = localStorage.fontweight + 'px'; document.getElementById('favcolor').value = localStorage.bgcolor; document.getElementById('fontwt').value = localStorage.fontweight; } else { document.body.style.backgroundColor = '#FFFFFF'; document.body.style.fontSize = '13px' document.getElementById('favcolor').value = '#FFFFFF'; document.getElementById('fontwt').value = '13'; } }

Функция length возвращает общее количество значений в области хранения.

Вышеуказанная функция может быть вызвана во время события onload тега body следующим образом

<body onload="applySetting()">

Область локального хранилища может быть очищена с помощью функции clear() или функции removeItem('key') . В нашем примере приведенная ниже функция вызывается по событию нажатия кнопки очистки. 

 function clearSettings() { localStorage.removeItem("bgcolor"); localStorage.removeItem("fontweight"); document.body.style.backgroundColor = '#FFFFFF'; document.body.style.fontSize = '13px' document.getElementById('favcolor').value = '#FFFFFF'; document.getElementById('fontwt').value = '13'; }

События хранения

Когда мы устанавливаем или удаляем данные из веб-хранилища, для объекта window будет запущено событие хранилища. Мы можем добавить слушателей к событию и при необходимости обработать изменения хранилища. 

 window.addEventListener('storage', storageEventHandler, false); function storageEventHandler(event) { applySetting(); }

Объект события имеет следующие атрибуты

  • ключ — свойство, которое изменилось
  • newValue — вновь установленное значение
  • oldValue — ранее сохраненное значение
  • url — полный путь к URL, откуда произошло событие
  • storageArea — объект localStorage или sessionStorage

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

Те же методы API применимы и для хранения сеансов, за исключением того, что методы должны выполняться sessionStorage объекта sessionStorage .

Вывод

Итак, теперь вы можете начать использовать веб-хранилище для хранения пользовательских настроек, информации о пользователе, информации о сеансе и т. Д. Вы также можете попробовать создать приложения, которые можно использовать полностью в автономном режиме, а данные, хранящиеся в автономном режиме, можно отправить обратно на сервер в виде пакетного обновления. когда пользователь снова в сети.

36
Share: