JS web storage. Краткий обзор

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

Сегодня речь пойдет об очень удобном функционале javascript, позволяющим хранить данные пользователя на его же машине без вмешательства сервера, — JS web storage (веб хранилице javascript).

Виды

Web storage, как и куки, могут быть постоянными, а могут быть временными. Local storage — данные постоянно хранятся на машине клиента, даже после закрытия браузера. Session storage — данные доступны только во время текущей сессии пользователя, то есть до закрытия вкладки или окна браузера.

Размер

Варьирует от браузера к браузеру. В целом, следует ориентироваться на 5 МБ доступных данных для каждого домена. В Internet Explorer, например, даже 10 МБ.

Напомню, что размер куки для домена ограничен 4 кб.

Совместимость

Web storage работает в браузерах следующих версий: Internet Explorer >= 8, Chrome >= 5,  Mozilla >= 3.5, Safari >= 4, Opera >=10.50.

Синтаксис

Чтобы добавить данные в сессионное хранилище используйте

sessionStorage.setItem(key,value);

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

localStorage.setItem(key,value);

Для получения значения ключа существует метод

getItem(key);

Узнать количество записей в хранилище позволяет свойство

length

Удаление записей происходит по схожему принципу с их получением:

removeItem (key);

Метод

clear();

очищает хранилище.

Перебор ключей в цикле

Пример

В этом примере показано использование JS web storage на практике, в частности, решается задача вывода некоторых новостей в хедере сайта с возможностью их закрытия. При этом данные о закрытых новостях запоминаются в локальном хранилище и более пользователю не показываются.

Один из блоков новостей (третий) не имеет ссылки «больше не показывать» и данные о его закрытии хранятся не в сессионном хранилище, как данные о двух других, а в локальном, постоянном хранилище. Таким образом, пользователю при следующем заходе на сайт (после закрытия браузера) будет обязательно показан третий блок и не будут показаны первые два, если он закрыл их.

 

Также полезным будет напомнить себе о формировании тела письма при отправке его средствами php. Читайте интересную статью о том, как прикрепить реферальные хвосты к телу письма при отправке формы по ссылке. Очень важно не забывать старое. Без него новое не имеет смысла.

На этом все. Надеюсь, информация была полезна для вас.