В последнее время существует тенденция по переносу нагрузки с сервера на сторону клиента, то есть, собственно, на веб-браузер пользователя. Так, например, можно часть данных перенести непосредственно на компьютер пользователя. Для реализации хранения данных на стороне клиента создана новая технология HTML5 Web Storage. Однако, перед тем как познакомиться с ней давайте вспомним другую более известную технологию хранения данных – файлы cookie.
Cookie
Практически каждый, кто занимался разработками в области web, обязательно сталкивался с таким понятием как «cookie». В общем, это такой файл, который создается браузером на диске пользователя, который предназначен для хранения небольших данных. Например, идентификатор сессии, который может получить сайт, чтобы отобразить пользователю корзину, в которую он уже успел положить товары при прошлом посещении сайта.
Файлы cookie передаются в обоих направлениях при каждом посещении домена пользователем. По мере перехода пользователем от одной страницы к другой информация о нем будет обновляться, поэтому cookie можно использовать как файл для хранения данных любого веб-приложения.
Важно отметить, что cookie поддерживаются абсолютно всеми браузерами. Однако, при всех своих достоинствах файлы cookie несут ряд существенных недостатков:
- Ограниченный размер. Максимальный размер фала cookie составляет всего 4 Кб;
- Безопасность. Воспользоваться вашими файлами cookie могут злоумышленники, так как они видны из сети;
- Загрузка. Поскольку файлы cookie передаются на сервер и обратно, то соответственно, они занимают часть пропускной способности канала
- Блокировка. Часть пользователей в целях безопасности ограничивает возможность браузеров по созданию cookie. Поэтому при отключенных cookie может
Web Storage
Если внимательно изучить все недостатки файлов cookie, то можно заметить, что все они в основном связаны с постоянной передачей файлов на сервер и обратно. Поэтому, видимо, для решения этой проблемы достаточно создать технологию, которая не нуждалась бы в соединении с сетью и постоянной передачей данных серверу.
Такой технологией и является HTML5 Web Storage. HTML5 предоставляет программный интерфейс, посредством которого, разработчики могут сохранять данные в легко извлекаемых javascript-объектах, постоянно существующих от одной загрузки страницы к другой. Используя хранилище сеанса или локальное хранилище, разработчики могут сами определять, должны ли данные сохраняться по отдельности для страниц, открытых в одном и том же окне (вкладке), и прекращать существование после закрытия этого окна (вкладки) или же совместно использоваться всеми окнами (вкладками) и продолжать существовать даже после перезапуска браузера.
Старые браузеры, к сожалению, не поддерживают спецификацию HTML5, но современные браузеры уже полностью могут использовать эту технологию. На данный момент она доступна для:
- Internet Explorer 8 и выше;
- Firefox 3.5 и выше;
- Opera 10.5 и выше;
- Chrome 4 и выше;
- Safari 4 и выше;
- iOS 2 и выше;
- Android 2 и выше.
Для работы с хранилищем данных используется javascript, поэтому данные не передаются когда угодно, а только тогда, когда это явно задано. Таким образом можно хранить большие объемы данных и при этом не бояться за производительность сайта.
Для реализации технологии Web Storage используются два объекта – локальное хранилище и хранилище сеанса.
localStorage
Локальное хранилище (представлено объектом localStorage) представляет собой базу данных, которая размещена на стороне клиента и представляет собой набор пар «ключ-значение». К преимуществам локального хранилища относят:
- Данные хранятся на стороне клиента и не передаются на сервер (без необходимости);
- Время хранения данных не ограничено;
- Максимальный размер хранимых данных зависит от браузера и теоретически не ограничен.
sessionStorage
Главное отличие хранилища сессии от локального хранилища во времени хранения данных. Объект sessionStorage хранит данные только в течение одной пользовательской сессии. Когда браузер пользователя будет закрыт все данные будут удалены. Однако во время сервинга по страницам данные будут доступны всегда, а не только на тех страницах, на которых они были созданы.
С точки зрения программирования различие в использовании сеансового и локального типов хранилищ сводится к различию имен объектов, посредством которых осуществляется доступ к ним: sessionStorage и localStorage соответственно.
Сохранение и извлечение данных
Прежде чем использовать Web Storage необходимо убедиться в его поддержке текущим браузером. Для этого можно использовать следующий пример кода (в данном случае локальное хранилище):
function isLocalStorageAvailable() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
Для сохранения данных в локальном хранилище можно воспользоваться одним из способов:
localStorage.setItem('id', 'value');
localStorage['id'] = 'value';
Как видно из примера выше, данные отсылаются парами «ключ (id) – значение». Соответственно и извлечь их можно, используя эти пары:
var data = localStorage.getItem('id');
var data = localStorage['data'];
Аналогично можно удалять данные из хранилища:
localStorage.removeItem('id');
Для полной очистки хранилища существует метод clear():
localStorage.clear();
При использовании хранилища сессии используются все те же методы.
Перенос вычислительной нагрузки на сторону клиента довольно распространенный способ сбережения вычислительных ресурсов сервера, не говоря уже о том, что в ряде случаев это повышает безопасность и снижает нагрузку на сеть.
В этом контексте умение использовать локальное и сеансовое хранилища является одним из базовых навыков веб - разработчика. Как и с большинством элементов, предоставляемых нам HTML5, сдерживает всеобщее распространение технологии Web Storage неутвержденная специфиакация и ограниченная поддержка браузерами.