Первый взгляд на Web Хранилище в HTML5

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

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

Браузерная поддержка

Данную технологию поддерживают следующие браузеры: Internet Explorer 8+, Firefox, Opera, Chrome, и Safari.

Заметка: Internet Explorer 7 и более ранние версии в пролёте.

localStorage и sessionStorage

На стороне клиента мы можем хранить данные в двух объектах:

  • localStorage - без ограничения по времени
  • sessionStorage - в пределах работы сессии

Перед тем как использовать localStorage или sessionStorage сделайте проверку на поддержку данных технологий:

if(typeof(Storage)!=="undefined")
  {
  // Всё ОК! localStorage и sessionStorage доступны!
  // Код.....
  }
else
  {
  // Опаньки! Старый браузер..
  }

Объект localStorage

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

Пример

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

Пояснение:

  • Создаём ключ/значение в объекте localStorage, точнее ключ="lastname" и значение="Smith"
  • Затем достаём данные по ключу "lastname" и вставляем как текст в элемент с id="result"

Заметка: пары ключ/значение всегда хранятся в виде строк. Не забудьте об этом, если вам нужно будет хранить какие-то сложные объекты (для этого просто преобразуйте их в строку).

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

Пример

if (localStorage.clickcount)
  {
  localStorage.clickcount=Number(localStorage.clickcount)+1;
  }
else
  {
  localStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

Объект sessionStorage

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

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

Пример

if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  }
else
  {
  sessionStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.w3schools.com/html/html5_webstorage.asp
Перевел: Станислав Протасевич
Урок создан: 12 Января 2014
Просмотров: 24235
Правила перепечатки


5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

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

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

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

  • Создание форм с помощью Webix Framework — 4 практических примера

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

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Января 2014 23:54
    serrg1994
    А как с ними работать в php ?
    • 13 Января 2014 00:21
      duxabilii
      Никак, localStorage и sessionStorage доступен только в браузере для JavaScript'ов
    • 13 Января 2014 00:35
      stas.protasevich
      либо как вариант можете отправлять их через AJAX запросы
  • 13 Января 2014 03:39
    igontarev
    потресающе
    • 10 Августа 2015 12:29
      БорисБритва
      Ты дeбил. Иди учить русский язык, потрЕсающий мyдaк
  • 13 Января 2014 09:18
    sand123
    Все круто, но чтобы избавиться от мороки с определением поддержки - лучше пользоваться оберткой типа store.js - там и методы еще есть всякие для установки, получения и удаления ключей из хранилища
  • 13 Января 2014 19:16
    igontarev
    все преимущества по сравнению с куками на лицо, не значит ли это, что куки станут больше не актуальны?
    • 13 Января 2014 22:47
      stas.protasevich
      Старые браузеры никто не отменял ..)
      • 15 Января 2014 00:35
        dimaloll
        Я думаю, что это не на долго! IE6 уже официально не поддерживается. EI7,IE8 скоро ждет тоже самое. ИМХО
        • 15 Января 2014 01:57
          stas.protasevich
          Ждём не дождёмся :)
    • 14 Января 2014 01:47
      RebelioUS
      +1 сейчас уже ни на чём не экономят, ни на RAM ни на HDD... Эхх... Проги жрут всё подряд...
  • 14 Января 2014 20:22
    FINESTGOL
    Докрутил и сделал для своего интернет-магазина, сессии в прошлое.
    • 16 Января 2014 03:16
      igontarev
      кстати, это отличное решение для магазина
  • 16 Января 2014 03:19
    igontarev
    никогда не понимал эту проблему старых браузеров, тут проблему создают сами пользователи, используя устаревшее ПО, так тяжело обновиться!?
  • 16 Января 2014 20:37
    FINESTGOL
    Фаерфокс вообще его не поддерживает получается или я не могу понять, почему NULL значение выдаёт...
    • 19 Января 2014 00:50
      igontarev
      видимо что-то у тебя не правильно, проверил в firefox v26.0, все работает!
  • 20 Февраля 2014 22:28
    Хайям Мустафаев
    Хорошо
^ Наверх ^