Всё про HTML5 Web Storage


Содержание

HTML5 — Web Storage

HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side and to overcome following drawbacks.

Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.

Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.

Cookies are limited to about 4 KB of data. Not enough to store required data.

The two storages are session storage and local storage and they would be used to handle different situations.

The latest versions of pretty much every browser supports HTML5 Storage including Internet Explorer.

Session Storage

The Session Storage is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.

Example

For example, if a user buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would «leak» from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.

HTML5 introduces the sessionStorage attribute which would be used by the sites to add data to the session storage, and it will be accessible to any page from the same site opened in that window, i.e., session and as soon as you close the window, the session would be lost.

Following is the code which would set a session variable and access that variable −

This will produce the following result −

Local Storage

The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user’s mailbox, on the client side for performance reasons.

Again, cookies do not handle this case well, because they are transmitted with every request.

Example

HTML5 introduces the localStorage attribute which would be used to access a page’s local storage area without no time limit and this local storage will be available whenever you would use that page.

Following is the code which would set a local storage variable and access that variable every time this page is accessed, even next time, when you open the window −

This will produce the following result −

Delete Web Storage

Storing sensitive data on local machine could be dangerous and could leave a security hole.

The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.

To clear a local storage setting you would need to call localStorage.remove(‘key’); where ‘key’ is the key of the value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.

Following is the code which would clear complete local storage −

HTML5 Урок 6 — Веб Хранилище

Хранение Данных На Клиентском Компьютере

HTML5 предлагает два новых объекта для хранения данных на клиентском компьютере:

  • localStorage (локальное хранилище) — хранит данные без лимита по времени
  • sessionStorage (сессионное хранилище) — хранит данные в течение одной сессии

Ранее эта задача выполнялась с помощью cookies. Однако, cookies не пригодны для больших объемов данных, потому что они пересылаются с каждым запросом к серверу, делая это очень медленным и неэффективным процессом.

В HTML5 данные НЕ пересылаются с каждым запросом к серверу, а используются ТОЛЬКО по необходимости. Можно хранить большие объемы данных без уменьшения производительности веб сайта.

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

HTML5 использует JavaScript для хранения и доступа к данным.

Объект localStorage (Локальное Хранилище)


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

Как создавать и обращаться к локальному хранилищу:

Пример

Следующий пример считает количество посещений страницы пользователем:

Пример

Объект sessionStorage (Сессионное Хранилище)

Объект sessionStorage хранит данные в течение одной сессии. Данные удаляются, когда пользователь закрывает окно браузера.

Как создавать и обращаться к сессионному хранилищу:

Пример

Следующий пример считает количество посещений страницы пользователем в текущей сессии:

Технология HTML5 Web Storage

В последнее время существует тенденция по переносу нагрузки с сервера на сторону клиента, то есть, собственно, на веб-браузер пользователя. Так, например, можно часть данных перенести непосредственно на компьютер пользователя. Для реализации хранения данных на стороне клиента создана новая технология HTML5 Web Storage. Однако, перед тем как познакомиться с ней давайте вспомним другую более известную технологию хранения данных – файлы 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 хранит данные только в течение одной пользовательской сессии. Когда браузер пользователя будет закрыт все данные будут удалены. Однако во время сервинга по страницам данные будут доступны всегда, а не только на тех страницах, на которых они были созданы.

Илон Маск рекомендует:  Что такое код pg_metadata

С точки зрения программирования различие в использовании сеансового и локального типов хранилищ сводится к различию имен объектов, посредством которых осуществляется доступ к ним: sessionStorage и localStorage соответственно.

Сохранение и извлечение данных

Прежде чем использовать Web Storage необходимо убедиться в его поддержке текущим браузером. Для этого можно использовать следующий пример кода (в данном случае локальное хранилище):


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

Как видно из примера выше, данные отсылаются парами «ключ ( id ) – значение». Соответственно и извлечь их можно, используя эти пары:

Аналогично можно удалять данные из хранилища:

Для полной очистки хранилища существует метод clear():

При использовании хранилища сессии используются все те же методы.

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

В этом контексте умение использовать локальное и сеансовое хранилища является одним из базовых навыков веб — разработчика. Как и с большинством элементов, предоставляемых нам HTML5, сдерживает всеобщее распространение технологии Web Storage неутвержденная специфиакация и ограниченная поддержка браузерами.

HTML5 Web Storage

HTML web storage; better than cookies.

What is HTML Web Storage?

With web storage, web applications can store data locally within the user’s browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Browser Support

The numbers in the table specify the first browser version that fully supports Web Storage.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML Web Storage Objects

HTML web storage provides two objects for storing data on the client:

  • window.localStorage — stores data with no expiration date
  • window.sessionStorage — stores data for one session (data is lost when the browser tab is closed)

Before using web storage, check browser support for localStorage and sessionStorage:

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example

  • Create a localStorage name/value pair with name=»lastname» and value=»Smith»
  • Retrieve the value of «lastname» and insert it into the element with

The example above could also be written like this:

The syntax for removing the «lastname» localStorage item is as follows:

Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:

Example

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

The following example counts the number of times a user has clicked a button, in the current session:


HTML5 Web Storage — Веб-хранилище

Курс по основам HTML5. W3Schools на русском языке. Уроки для начинающих

HTML веб-хранилище; лучше чем cookies.

Что такое HTML веб-хранилище?

С помощью веб-хранилища веб-программы могут сохранять данные локально в браузере пользователя.

До появления спецификации HTML5, данные приложений должны были сохраняться в куках (cookies), включенных в каждом запросе сервера. Веб-хранилище является более безопасным, и большие объёмы данных могут сохраняться локально, не влияя на работу веб-сайта.

В отличие от файлов cookie, лимит хранилища намного больший (по крайней мере 5 МБ), и информация никогда не передаётся на сервер.

Веб-хранилище — для каждого источника (для домена и протокола). Все страницы с одного источника (одинакового происхождения) могут сохранять и получать доступ к этим самым данным.

Поддержка браузерами

Цифры в таблице определяют первую версию браузера, которая полностью поддерживает веб-хранилище.

API
Веб-хранилище 4.0 8.0 3.5 4.0 11.5

HTML Объекты веб-хранилища

Веб-хранилище HTML обеспечивает два объекта для хранения данных на стороне клиента:

  • window.localStorage — сохраняет данные без даты окончания строка действия;
  • window.sessionStorage — сохраняет данные для одного сеанса (данные теряются при закрытии вкладки веб-браузера).

Перед использованием веб-хранилища проверьте поддержку браузера localStorage и sessionStorage:

Объект localStorage

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

Пример:

// Сохраняем
localStorage. setItem ( «lastname» , «Smith» );

// Получаем
document. getElementById ( «result» ). innerHTML = localStorage. getItem ( «lastname» );

  • Создаём пару localStorage name/value (имя/значение) с name=»lastname» и value=»Smith»;
  • Получаем значение «lastname» и вставляем его в элемент с (результат).

Приведённый выше пример также может быть написан таким образом:

Синтаксис для удаления элемента «lastname» localStorage является следующим:

Примечание: Пары name/value всегда сохраняются как строки. Не забывайте конвертировать их в другой формат, когда это необходимо!

Следующий пример подсчитывает количество нажатий пользователем кнопки. В этом коде строка значений преобразуется в число, чтобы иметь возможность увеличить счетчик:

Пример:

Объект sessionStorage

Объект sessionStorage соответсвует объекту localStorage, кроме того, что он сохраняет данные лишь для одного сеанса. Данные удаляются, когда пользователь закрывает определённую вкладку веб-браузера.

В следующем примере подсчитывается количество раз, когда пользователь нажал кнопку в текущей сесии:

Local Web Storage — интересная и эффективная фича HTML5, призванная заменить cookies

Наверняка вы уже сумели заметить: HTML5 стал весьма популярен. Создаются великолепные игры с использованием холстов (canvas), медиа-контент, ориентирующийся на различные устройства. Веб-разработка проделала немалый путь от iFrames 1990-х. В этой статье поделимся с вами советами по работе с одной очень полезной фичей HTML5: локальное хранилище (Local Web Storage) – возможно, настоящий святой грааль веб-разработки.

Раньше (а в большинстве случаев, и до сих пор) сайты сохраняли информацию о выбранных пользователем параметрах, используя cookies. Ориентируясь на эту информацию, сайт выглядел по-разному для разных пользователей, т.е. был кастомизирован. Например, при первом посещении сайта вы могли выбрать язык сайта, а когда бы вы зашли на эту же страницу снова, вам не пришлось бы делать этот выбор заново. Аналогично работают выбор темы, цветовой схемы, чекбоксы «Запомнить меня» и т.д. Функциональность cookies была неимоверно важна, но часто неэффективна.

Чем плохи cookies?


Можно перечислить несколько недостатков использования cookies: например, ограниченный размер (4 KB) и трудности, связанные с вопросом сохранения неприкосновенности личной информации при работе с незашифрованными cookies. Но я уверен, что основная проблема при использовании cookies — это накладные расходы.

Так, если даже вы сильно ограничиваете объем сохраняемой на компьютере пользователя информации, то, наблюдая рост количества пользователей вашего сервиса, вы также заметите, что передаете огромное количество информации по протоколу HTTP (что, пожалуй, может отрицательно сказаться на размере вашего кошелька). Cookies сохраняются на устройстве, и, хотя в масштабах одного пользователя объем передаваемых данных совсем небольшой, при работе с большим количеством пользователей объем загружаемых серверами данных неприятно удивит вас.

Что же может стать решением? HTML5 и реализованное в нем локальное хранилище.

14 ноября в 18:30, Витебск, беcплатно

HTML5 предоставляет возможность странице взаимодействовать с локальными данными пользователя прямо из браузера, а не посредством обмена этими данными с сервером. И поэтому, из-за отсутствия необходимости передавать информацию с жесткого диска на сервер, возможно увеличивать объем сохраняемых настроек пользователя до 5MB!

Примеры

Давайте рассмотрим, как же просто взаимодействовать с локальным хранилищем посредством JavaScript:

Вот так-то! Мы добавили новую переменную, сохранившую настройки пользователя в локальном хранилище. И когда пользователь снова зайдет на сайт, просто получим значение этой переменной:

После прочтения всего написанного выше в этом посте, вы, наверное, удивлены тем, как же просто это реализуется. Так в том-то и дело! Именно простота в написании кода становится одним из главных доводов в пользу использования HTML5 Local Storage. Занесение нового значения и получение его заняло всего несколько строчек кода. Если же вы хотите дать значению этой переменной некоторый срок годности, по истечении которого это значение необходимо будет очистить, то само удаление будет выглядеть так:

Остановись мы на этом, в вашем арсенале были бы лишь основные умения работы с локальным хранилищем, но давайте немного разберемся, что же еще можно сделать в рамках работы с этим инструментом. Как вы могли заметить, локальное хранилище используется в основном для хранения строк. А вот если вам понадобится хранить объект, то у вас возникнут проблемы… пока вы не поймете, что разработчик может найти выход из любой ситуации!

Илон Маск рекомендует:  Что такое код notes_mark_unread

Как известно, любой объект можно превратить в строку с помощью определенных методов. Именно это мы и используем:

Что ж, попробуйте поработать с локальным хранилищем, и вы избавитесь от огромных накладных расходов!

Веб Хранилища

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

Веб хранилища представляют собой более функциональную альтернативу cookie.

Преимущества веб хранилищ:

  • Можно хранить неограниченные объемы информации;
  • Информация, сохраненная в хранилищах, доступна даже без подключения к интернету;
  • Данные, находящиеся в хранилище, не отсылаются при каждом запросе страниц;
  • Информацию более удобно сохранять и извлекать;
  • Хранилища более безопасны чем cookie.

Веб хранилища поддерживаются в следующих браузерах: IE8+, Safari 4+, Chrome 4+, Firefox 3.5+, Opera 10.50+.

Сохранение данных

Вы можете сохранять данные используя два специальных объекта: sessionStorage и localStorage.

Обращаться к данным объектам можно с помощью JavaScript и других клиентских скриптов.

Обратите внимание: каждый веб-сайт имеет доступ только к своим данным в хранилище и поэтому не может обращаться к данным, которые были сохранены другими сайтами.

Использование sessionStorage

Объект sessionStorage сохраняет данные в течении пользовательской сессии. Когда браузер пользователя будет закрыт данные сохраненные в объекте будут удалены.

Данные в хранилище доступны со всех страниц сайта, а не только с той с которой они были сохранены.

Использование localStorage

Объект localStorage сохраняет данные на неограниченный период времени.

Данные сохраненные в данном объекте будут доступны даже без подключения к интернету.

Веб хранилище (API)

На этой странице

Web Storage API предоставляет механизмы, при помощи которых браузеры могут безопасно хранить пары ключ/значение в более интуитивно понятной манере, чем куки (cookies).

Основы Веб хранилища и его использование

В основе Веб хранилища лежат два механизма:

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


Обе функции доступны через Window.sessionStorage и Window.localStorage свойства (если быть более точным, в браузерах, поддерживающих хранилища объект Window выполняет объекты WindowLocalStorage и WindowSessionStorage , которые содержат свойства localStorage и sessionStorage ) — вызов одного из них создает представление объекта Storage , через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта — они функционируют и управляются отдельно друг от друга.

Замечание: Начиная с версии 45 Firefox, когда браузер крашится/перезагружается, объем данных, сохраненных для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.

Замечание: Доступ к веб хранилищу из iFrame третьей стороны запрещен, если пользователь отключил cookies третьих сторон (Firefox ведёт себя так с версии 43).

Замечание: Web Storage это не тоже самое, что mozStorage (Mozilla’s XPCOM интерфейсы для SQLite) или Session store API (XPCOM утилита хранения для расширений).

Интерфейсы Веб хранилища

Примеры

Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его Web Storage Demo. На лендинге нашего примера вы найдете элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мнгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите ее снова, ваши настройки восстановились.

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

Спецификации

Спецификация Статус Комментарий
HTML Living Standard Живой стандарт

Поддержка браузерами

Функция Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
Функция Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 ? 8 11 iOS 3.2

У каждого браузера свои объемы localStorage и sessionStorage. Здесь об ограничениях размеров хранилищ для разных браузеров.

Замечание: Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в cache директории, которая время от времени подчищается системой, в основном когда кончается место.

Приватный режим/Инкогнито

Многие браузеры в наши дни поддерживают опции приватности, названные «Инкогнито» или «Приватный просмотр» и т.п., что позволяет быть уверенными, что следов приватной сессии не остается после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.

Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием — все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.

Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на этот пост блога WHATWG, специонально посвященный этой теме.

jQuery и другое…

css, html, php, javascript, jQuery, ajax … – решения, примеры, рецепты

Что такое Web Storage?

Web Storage наверное, одна из самых простых для понимания спецификаций HTML5. Статьи про эту технологию конечно уже существуют, но я, следуя духу блога, попробую объяснить, что такое Web Storage, очень простым языком, с примерами и подробными комментариями к ним.
Сразу оговорюсь, что библиотеку jQuery я использую в примерах скорее по привычке…

Обычно Web Storage рассматривают как развитие технологии cookie*. Действительно, при всей универсальности (поддерживаются производителями браузеров с незапамятных времен), файлам cookie присущи серьезные (с современной точки зрения) недостатки:
— ограниченный, и очень маленький размер файлов. Обычно не более 4 Кбайт;
— передача от браузера к серверу и обратно при каждом запросе;
Это только основные недостатки, углубляться в остальные не будем, чтобы не отвлекаться от темы.

Куки (от англ. cookie — печенье) — небольшой фрагмент данных, созданный веб-сервером или веб-страницей и хранимый на компьютере пользователя в виде файла, который веб-клиент (обычно веб-браузер) каждый раз пересылает веб-серверу в HTTP-запросе при попытке открыть страницу соответствующего сайта. Применяется для сохранения данных на стороне пользователя, на практике обычно используется для:
— аутентификации пользователя;
— хранения персональных предпочтений и настроек пользователя;
— отслеживания состояния сессии доступа пользователя;
— ведения статистики о пользователях.

Что получаем от использования Web Storage?
Во-первых, общий размер сохраняемых данных до 5 Мбайт (по крайней мере это рекомендации производителям браузеров);
Во-вторых, данные обоих хранилищ (локальное хранилище и хранилище сеанса) не гоняются от клиента к серверу и обратно;
В-третьих, в настоящее время Web Storage уже поддерживается последними версиями основных браузеров (к сожалению, отличия в реализации все равно существуют);

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

Проверка сводится к проверке существования объектов хранилища сеансов window.sessionStorage и локального хранилища window.localStorage.

Вы можете открыть файл example-a.html, чтобы увидеть пример в действии. Попробуйте открыть пример в разных браузерах.

Выполняем проверку window.sessionStorage

Аналогичным образом можно выполнить и проверку существования window.localStorage.

Если мы убедились, что используемый браузер поддерживает эту технологию, то настало время «живьем» посмотреть на этот самый Web Storage и узнать, чем отличается локальное хранилище от хранилища сеанса.

Возьмем для примера браузер Opera. Если нажать комбинацию клавиш Ctrl+Shift+I, откроется панель «Dragon Fly» – встроенное в браузер средство отладки. Можете попробовать и Google Chrome – используйте точно такое же сочетание клавиш.

Посмотрите – здесь доступно для просмотра, изменения и удаления содержимое обоих хранилищ.


Теперь о том, почему хранилищ два и чем они отличаются.

Если приложению требуются данные, которые продолжают существовать после того, как будет закрыта вкладка или окно браузера, тогда следует использовать localStorage. Здесь уместно сохранять данные, содержащие например, пользовательские настройки каких-либо интерфейсов.

Если же данные должны храниться в течение времени, которое необходимо для просмотра нескольких страниц (диалоговые окна, многостраничные формы) – подойдет sessionStorage. В этом случае данные перестанут существовать, как только пользователь закроет вкладку или окно браузера.

В остальном оба хранилища выглядят братьями-близнецами. По крайней мере установка, получение и удаление данных для обоих типов хранилищ не отличается ничем, кроме названия объекта – sessionStorage или localStorage.

Попробуем сохранить какие-либо данные в хранилище сеансов:

Илон Маск рекомендует:  Что такое код asp iisipsecurity

Метод setItem принимает два аргумента – строку с именем ключа и строку с данными, которые в дальнейшем можно будет извлечь по соответствующему им ключу. Причем сделать это очень просто:

Передаем методу getItem в качестве аргумента имя ключа, и в переменной d получаем строку ‘Какие-то данные в хранилище сеанса’. Так же просто можно удалить ставшие ненужными данные:

После этой операции, при попытке получить данные по ключу mySessionKey из хранилища сеанса, будем получать null.

Сохранять и получать значения можно и иным способом, без вызовов методов setItem и getItem. Например:

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

Вообще-то, спецификация Web Storage подразумевает сохранение данных не только строкового типа. Но, по крайней мере в текущих версиях браузеров, эти возможности ограничены. Поэтому без некоторых хитростей тут не обойтись. Вернее, пока не обойтись…

Вы можете открыть файл example-b.html, чтобы увидеть пример в действии. Попробуйте открыть пример в разных браузерах.

Поставим перед собой задачу сохранить в локальном хранилище под именем myLocalData вот такой объект:

Казалось бы нет ничего сложного, проходили… Но, по причине, указанной выше мы сделаем несколько иначе:

Приведем объект JSON к строке и только потом сохраним эту строку в локальном хранилище под именем myLocalData.

Соответственно, при извлечении нужных нам данных проделаем обратную операцию:

[ см. $.parseJSON(json) ]
после чего в переменной local будет храниться объект, к свойствам которого можно легко обратиться:

Мы познакомились с методами getItem, setItem и removeItem объектов localStorage и sessionStorage, но это еще не все возможности.

Объекты localStorage и sessionStorage имеют еще полезное свойство length, в котором как Вы уже догадались, содержится число, которое может сказать о том, сколько пар ключ/значение находится в данный момент в хранилище.

Вот так в переменную n мы записали количество пар ключ/значение, содержащихся в локальном хранилище.

Есть у обоих объектов метод clear, по названию которого тоже можно догадаться о его предназначении:

Таким образом можно удалить все содержимое хранилища (в данном случае локального).

Рассмотрим еще один метод, который обеспечивает извлечение заданного ключа по его индексу – метод key(index).

Вот так можно получить значение ключа по его индексу. Ключи индексируются начиная с нуля, т.е. первому ключу соответствует индекс 0, а последнему length – 1. При попытке получить значение ключа по несуществующему индексу будет возвращено значение undefined (в Opera) или null (в Google Chrome).

Теперь немного про ошибки, которые могут возникать при сохранении данных в хранилищах. При превышении памяти хранилища попытка сохранения в нем значения приведет к возникновении ошибки QUOTA_EXCEEDED_ERR (некоторые браузеры могут предложить увеличить размер хранилища). К слову, такая же ошибка возникнет при отключении хранилища пользователем. Соответственно, в своих приложениях с использованием как локального хранилища, так и хранилища сеанса следует предусматривать обработку таких ошибок.

На «закуску» осталось самое интересное – мы рассмотрим механизм событий, реализованный в интерфейсе HTML5 Web Storage.

Сначала на простом примере познакомимся с объектом StorageEvent. Пример продемонстрирует возможность обмена данными между двумя окнами, относящимися к одному и тому же источнику(*). Естественно, что в примере будет использовано локальное хранилище, поскольку, как Вы помните, данные хранилища сеансов «живут» только в одном окне.

* – ресурс адресуется с использованием одного и того же сочетания схемы, хоста и порта.

Откройте файлы примеров example-c.html и example-d.html в двух разных окнах одного и того же браузера. Попробуйте ввести какие-либо произвольные данные в поле ввода в любом окне и нажмите кнопку Изменить. Посмотрите, что произойдет в другом окне.

Если посмотрели пример, то попробуем немного расшифровать, что же там происходит.

При нажатии на кнопку мы просто изменяем данные для ключа myText, находящиеся в локальном хранилище.

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

Конечно, такой обработчик не сработает в IE, но нам сейчас не до кроссбраузерности.

Рассмотрим каждое из свойств:

key – содержит значение ключа, который был обновлен/удален;
url – адрес источника в котором произошло событие;
newValue – содержит новое/измененное значение (если значение было удалено, то null);
oldValue – содержит старое значение (если значение добавлено впервые, то null);
storageArea – ссылка на хранилище;


В принципе ничего непонятного тут нет. Несколько подробнее можно сказать разве что о storageArea. Его удобно использовать, когда необходимо при изменении каких-либо данных в хранилище производить операции над другими данными из того же хранилища. В примере мы используем свойство length, чтобы узнать количество содержащихся в хранилище элементов.

В заключение хочу сказать, что я ни в коем случае не призываю никого сразу же внедрять новые возможности в реальные проекты. Думаю, что когда вы будете испытывать предоставленные файлы примеров, то наверняка заметите отличия (и немалые!) в реализации спецификации Web Storage в различных браузерах. Наверное, время для 100% использования новых возможностей пока не пришло. Но оно обязательно придет – и встретить его надо вооруженным знаниями.

Вы можете скачать архив, который включает в себя все примеры, которые рассматривались в статье.

HTML5 Web Storage

cookies (куки) используется для хранения данных в браузере, но есть определенные недостатки, которые были решены с появлением HTML5 Web Storage.

Недостатки cookies

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

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

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

HTML5 Web Storage имеет достаточно простой API для извлечения записи данных локального хранилища. Он может хранить до 10 Мб данных для одного домена. В отличие от файлов cookie, Web Storage не делает каждый раз запрос HTTP.

IE7 и более ранние версии не поддерживают HTML5 Web Storage. Все другие браузеры, Chrome, Opera, Firefox, Safari и IE8+ поддерживают HTML5 Web Storage.

Типы Web Storage

Local storage : Хранит данные без срока годности. Эти данные будут доступны даже если вкладки браузера открыты или закрыты.

Session storage Хранит данные за один сеанс. Материалы данных будут очищены, как только пользователь закроет браузер.

Обратите внимание, что в обоих типах Web Storage (веб-хранилище) не будет доступен на других браузерах. Потому что дынные веб-хранилища хранятся в активном браузере.

Пример Web Storage

Для лучшего понимания Web Storage смотрим пример. Это простая веб-страница пользователя, которая позволит нам изменить цвета фона страницы и размер шрифта в заголовке.

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

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

Для этого используйте стандартный API или Modernizr, чтобы проверить совместимость браузера.

Modernizr — это библиотека JavaScript, которая помогает нам определить браузеры с поддержкой HTML5 и CSS3. Для этого нужно скачать последнюю версию Modernizr и подключить библиотеку.

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

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

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

Если изменить фон и размер шрифта приложения. Ключ getItem(‘Key’) покажет сохранённые данные. Поэтому некоторое время фон и размер шрифта приложения не изменится.

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

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

Local storage может быть очищено с помощью функций clear() или removeItem(‘key’) . В примере ниже, функция вызывает событие click кнопки «очистить».

Хранение событий

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

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

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

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

Заключение

Уверен, теперь вы можете использовать HTML5 Web Storage, чтобы хранить настройки пользователя, информацию сеанса т.д. Вы также можете попробовать создать приложение, которое сможет работать полностью в автономном режиме, а данные хранящиеся во время автономной работы могут быть отправлены на сервер в виде пакета обновления, когда пользователь подключится к сети. Так же смотрите вариант хранение данных с помощью HTML5 AppCache и IndexedDB

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL