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

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

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

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

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

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

localStorage и sessionStorage

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

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

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

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

Объект localStorage

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

Пример

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

Пояснение:

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

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

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

Пример

1 if (localStorage.clickcount)
2 {
3 localStorage.clickcount=Number(localStorage.clickcount)+1;
4 }
5 else
6 {
7 localStorage.clickcount=1;
8 }
9 document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

Объект sessionStorage

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

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

Пример

1 if (sessionStorage.clickcount)
2 {
3 sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
4 }
5 else
6 {
7 sessionStorage.clickcount=1;
8 }
9 document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

Данный урок подготовлен для вас командой сайта http://ruseller.com/lessons.php?rub=1&id=1950
Источник урока: http://www.w3schools.com/html/html5_webstorage.asp 

Добавить комментарий

Закрыть меню
×

Корзина