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

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

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

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

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

localStorage и sessionStorage

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

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

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

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

Объект localStorage

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

Пример

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

Пояснение:

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

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

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

Пример

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

Объект sessionStorage

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

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

Пример

1if (sessionStorage.clickcount)
2{
3sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
4}
5else
6{
7sessionStorage.clickcount=1;
8}
9document.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