Введение в Html 5: Web-Storage

Привет дорогой читатель моего блога jonyit.ru
Я достал довольно интересную информацию по поводу нового api средства web-storage использующегося в HTML5, который заменит нам всеми любимые Куки и хочу её с вами поделиться. Cоветую подписаться на мою Rss-ку, чтоб не пропустить чего интересного. А я пока начну.

web-storage

Web-storage(веб-хранилище)

“Web-storage” является новым api средством в HTML5 и имеет новые преимущества по сравнению с традиционными cookies. Хотя спецификация всё ещё находиться в статусе проекта W3C, но основные браузеры уже поддерживают его.

Это означает, что вы можете начать использовать API, sessionStorage и localStorage objects и пользоваться преимуществами Web-storage.

Ограничения Cookies

Во-первых, было Cookies. Они имели огромную значимость для Web технологий. Например, Cookies позволяют нам войти автоматически на сайты которыми мы частенько пользуемся, например mail.ru и Vkontakte.ru

С другой стороны Cookies это наш поиск и история, которую можно проследить и в итоге мы видим, что наша личная информация постоянно находиться под угрозой.

Ещё одна проблема Cookies в том что у них есть данные емкости ограничений. Предел хранения данных Cookies во многих Веб браузерах составляет около 4кб. Cookies основаны на устаревшей спецификации 1997 года, рекомендованной минимум 4096 байт на Cookie.

Хотя большинство браузеров позволяют хранить от 30 до 50 Cookies, так что если вы превысили 4 КБ предел, то создается еще один, но это все же реальные ограничения.

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

Кроме того, мы часто забывают побочный эффект Cookies в том, что они всегда отправляются с каждым запросом http (как правило даже если это изображение) и в результате увеличивают объём трафика в сети.

Web-storage пришёл на замену Cookies.

Web Storage сдвигает Cookies в сторону. Силой Web Storage является, по крайней мере две вещи.

Во-первых, простота в использовании для Web-разработчиков: Web Storage имеет простой API для получения данных и установки пары ключей.

Во-вторых обеспечивает объем пространства. По умолчанию спецификацию квоты дискового пространства решает агент пользователя, и большинство из них предлагают не меньше, чем 5 или 10 МБ для хранения на домен. Это означает, что мы можем хранить больше, чем просто основные данные имя пользователя / сессии и информации о стороне клиента: пользовательские настройки, локализацию данных, временное автономное хранилище для дозирования, сервер записывает и многое другое.

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

Хранение сессии и Локальное хранение

Важно знать, что Есть два типа объектов веб-хранилища: sessionStorage и localStorage.

sessionStorage доступна только во вкладке браузера или окна сессии. Она создана для хранения данных в одном сеансе веб-страницы.

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

Данные Web-storage в обоих случаях не доступны между различными браузерами. Например к хранимым объектам, созданным в Firefox нельзя получить доступ из Internet Explorer, так же как Cookies.

Где используеться Web-storage

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

Ваши приложения действительно могут быть использованы автономно, используя localStorage. Данные могут быть отправлены и хранимы сервером, когда пользователя нет в сети.

С другой стороны переход web-storage может означать большой выигрыш производительности, когда некоторые статические данные хранятся на клиенте, чтобы минимизировать число последующих запросов. Даже изображения могут быть сохранены в строке, используя Base64.

Для примеров упомянутых выше, это имеет смысл использовать localStorage. Вы можете задаваться вопросом, а зачем? Когда вы можете выбрать sessionStorage.

В некоторых случаях вы просто хотите избавиться от данных, как только окно закрывается. Или возможно, вы не хотите, чтобы приложение вмешивалось в другое приложение открытое в другом окне (например, при запуске двух копий игры Scrabble или запуск нескольких модульных тестов одновременно, вы не хотите столкновения данных). Такие сценарии служат лучше с sessionStorage.

Использование Web-storage API

Это действительно просто. Наверное, лучше всего показать вам это:

1
2
3
4
5

sessionStorage.setItem('myKey', 'myValue');
var myVar = sessionStorage.getItem('myKey');
 
localStorage.setItem('myKey', 'myValue');
var myVar = localStorage.getItem('myKey');

Обратите внимание, что интерфейс для создания и sessionStorage и localStorage идентичны и они являются глобальными объектами.

SetItem метод для установки ключа и его значения, а потом. GetItem для получения значения конкретного ключа.

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

События Web-storage.

Всякий раз, когда мы храним данные в localStorage, хранения события происходит в других окнах браузера.

Что же такого хорошего в этом?

Localstorage_event

Это событие может быть использовано для преодоления, так называемых условий гонки между окнами браузера. Если у пользователя на сайте открыты разные вкладки, то это событие может быть использовано для синхронизации данных.

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

Пример кода:

1
2
3

window.addEventListener('storage', function(event) {
  console.log('The value for ' + event.key + ' was changed from' + event.oldValue + ' to ' + event.newValue);
  }, false);

Выше, мы создаем событие на объект окна для хранения событий. Когда событие происходит, функция, которая записывает ключ OldValue и NewValue в консоли (например Firebug или Google Chrome Developer Tools) выполняется.

Поддержка браузеров для Web-storage.

Вам предлагается, начать использовать этот API сегодня. Web Storage реализована в IE8 и во всех современных браузерах (т.е. начиная с Firefox 3.5, Safari 4, Google Chrome 4 и Opera 10.50).

Хранения событий было добавлено позже, но доступен по крайней мере в Firefox 5, Safari 5, Chrome 12, Opera 10.5 и ещё как сообщается в IE9.

Вопросы безопасности

Пожалуйста, помните, что использование веб-хранилища на самом деле не более безопасны, чем Cookies. С большой силой, приходит большая ответственность.

SSL решает больше проблем по безопасности. (SSL означает, что клиент и сервер общаются только зашифрованными данными). Вот почему все больше и больше сайтов используют безопасный HTTPS протокол.

В любом случае, не безопасно хранить важные данные (такие как пароли и номера кредитных карт) на стороне клиента.

Заключение.

Web Storage иногда называют хранения DOM, это то же самое. Последнее вытекает из того факта, что данные, на самом деле храняться в окне объекта JavaScript (то есть window.localStorage и window.sessionStorage).

И последнее, но не менее важное имейте в виду, что web-storage как Cookies, может быть отключены пользователем. Таким образом, вы всегда должны реализовать запасный механизм в случае если window.sessionStorage или window.localStorage недоступны.

Всё таки каждый web-мастер должен разбираться в технической части браузеров. На этом всё с вами был ночной гость Jonyit, пока.