HTML5 Веб-хранилище
Веб-хранилище HTML; лучше, чем печенье.
Что такое веб-хранилище HTML?
Благодаря веб-хранилищу веб-приложения могут хранить данные локально в браузере пользователя.
Перед HTML5 данные приложения должны храниться в файлах cookie, включенных в каждый запрос сервера. Веб-хранилище является более безопасным, и большие объемы данных могут храниться локально, не влияя на производительность веб-сайта.
В отличие от файлов cookie, ограничение хранилища намного больше (по крайней мере, в мегабайтах), и информация никогда не передается на сервер.
Веб-хранилище для каждого источника (для каждого домена и протокола). Все страницы из одного источника могут хранить и получать доступ к одним и тем же данным.
Поддержка браузера
Номера в таблице указывают первую версию браузера, полностью поддерживающую веб-хранилище.
| API | |||||
|---|---|---|---|---|---|
| Веб-хранилище | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Объекты веб-хранилища HTML
Веб-хранилище HTML предоставляет два объекта для хранения данных на клиентском компьютере:
window.localStorage- хранит данные без даты истечения срока действияwindow.sessionStorage- хранит данные для одного сеанса (данные теряются при закрытии вкладки обозревателя)
Перед использованием веб-хранилища Проверьте поддержку обозревателя для localStorage и sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
Объект localStorage
Объект localStorage хранит данные без даты истечения срока действия. Данные не будут удалены при закрытии обозревателя и будут доступны на следующий день, неделю или год.
Пример
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Example explained:
- Создайте пару localStorage имя/значение с name="lastname" и value="Smith"
- Извлечение значения "lastname" и вставьте его в элемент с id="result"
Приведенный выше пример также может быть написан так:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Синтаксис для удаления "Фамилия" localStorage элемент выглядит следующим образом:
localStorage.removeItem("lastname");
Примечание: Пары "имя-значение" всегда хранятся в виде строк. Не забудьте преобразовать их в другой формат, когда это необходимо!
В следующем примере подсчитывается количество раз, когда пользователь нажал кнопку. В этом коде строка значения преобразуется в число, чтобы иметь возможность увеличить счетчик:
Пример
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.";