Краткое руководство по Web Storage
Почти всем настольным и мобильным приложениям нужно где-то хранить пользовательские данные. Но как быть веб-сайтам? В прошлом, мы использовали для этой цели файлы cookie, но у них есть серьезные ограничения.
HTML5 предоставляет более подходящие инструменты для решения этой проблемы. Первый инструмент – это IndexedDB, который является излишним, говоря о замене cookie, а второй – Web Storage, являющееся комбинацией двух очень простых интерфейсов API. О нем я и собираюсь рассказать вам сегодня.
Что такое Web Storage?
Вообще, Web Storage (известное также как DOM-хранилище) относится ко множеству API, которые нацелены на обеспечение простого способа хранения данных со стороны клиента в браузере. Эта технология более безопасная и быстрая, чем cookie, не о говоря уже о ее мощности.
Данные сохраняются в пользовательском браузере и не передаются по сети как файлы cookie. Кроме того, можно сохранять большее количество информации, чем при использовании файлов cookie, без ущерба производительности вашего веб-сайта.
Web Storage предоставляет два отличных объекта для хранения данных:
localStorage: Используя этот объект, вы будете сохранять данные без даты окончания срока. Это значит, что данные будут сохранены на локальном диске пользователя навсегда.
sessionStorage: Используя этот объект, данные, которые вы сохранили, будут находиться в хранилище до тех пор, пока посетитель не закроет браузер (но не вкладку). Хороший вариант использования для данного объекта это сохранение временных данных, таких как содержимое форм, заполненных пользователем, в случае, если пользователь случайно закрыл вкладку или обновил страницу.
Поехали!
Итак, сейчас когда мы узнали, что же такое Web Storage, пришло время поглубже окунуться в него.
localStorage
Сохранять данные в localStorage очень просто – вам нужно только объявить их как свойство. Чтение данных также просто, как в примере, приведенном ниже:
localStorage.myText = 'Это текст, который был сохранен при помощи объекта localStorage';
document.getElementById("text").innerHTML= localStorage.myText;sessionStorage
Хранение и извлечение данных из sessionStorage выполняется таким же способом:
sessionStorage.myText = 'Это текст, который был сохранен при помощи объекта sessionStorage';
document.getElementById("text").innerHTML= sessionStorage.myText;Оба объекта имеют методы setItem(), getItem() и removeItem(), которые вы также можете использовать:
localStorage.setItem('username','Johnny');
console.log(localStorage.getItem('username'));
localStorage.removeItem('username'); // Johnny больше нет!Также можно выполнять по ним перебор, как по обычным объектам, и проверять их длину:
console.log(localStorage.length);
for(var i in localStorage){ console.log(localStorage[i]);}Это только основы для использования Web Storage, но этого будет достаточно для реализации API в ваших веб-приложениях.
Существуют и более крутые вещи, которые вы можете делать с Web Storage, как вы сможете увидеть прямо сейчас.
Поддержка браузера
Как обычно в случае с потрясающими функциями HTML5, вы должны проверить список поддерживаемых браузеров, прежде чем воспользоваться этими функциями. Web Storage поддерживается почти всеми современными браузерами, включая IE8+, поэтому оно готово к использованию.
К сожалению, IE7 и более ранние версии Internet Explorer не поддерживают API, поэтому вам нужно будет использовать один из приведенных ниже откатов, если вы хотите поддерживать эти версии.
Библиотеки Javascript для Web Storage
Здесь приведены несколько крутых библиотек на JavaScript, которые поднимают Web Storage на следующий уровень:
basket.js
Простой (экспериментальная проверка концепции) загрузчик скриптов, который кэширует скрипты при помощи localStorage.
Kizzy
Легкая, кросс-браузерная JavaScript утилита локального хранения.
LocalDB.js
Инструмент, который отображает структуру баз данных в объекты с помощью localStorage API.
Rockstage.js
Библиотека JavaScript для более легкого использования localStorage и sessionStorage.
store.js
store.js предоставляет простой API для кросс-браузерного локального хранилища.
Заключение
Web Storage – это отличная функция HTML5, и хотя прошло время с ее введения, сейчас у нас есть множество великолепных библиотек для нее.
Не забывайте, что это был только краткий обзор, и есть еще много чего, что можно узнать об Web Storage, но я надеюсь, что эта статья помогла вам начать работу в правильном направлении!