HTML5 Веб хранилище API
HTML Веб хранилище; лучше, чем файлы cookie.
Что такое HTML веб хранилище?
С помощью веб хранилища, веб приложения могут сохранять данные локально в браузере пользователя.
До появления HTML5 данные приложений должны были храниться в файлах cookie, включаемых в каждый запрос сервера. Веб хранилище является более безопасным, и большие объемы данных могут храниться локально, не влияя на производительность веб сайта.
В отличие от файлов cookie, лимит хранения намного больше (не менее 5 Мб), и информация никогда не передается на сервер.
Веб хранилище предназначено для каждого источника (для каждого домена и протокола). Все страницы из одного источника могут хранить и получать доступ к одним и тем же данным.
Поддержка браузеров
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает веб хранилище.
| API | |||||
|---|---|---|---|---|---|
| Веб хранилище | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Объекты веб хранилища HTML
HTML веб хранилище предоставляет два объекта для хранения данных клиента:
window.localStorage- хранит данные без срока годностиwindow.sessionStorage- сохраняет данные за один сеанс (данные теряются при закрытии вкладки браузера)
Перед использованием веб хранилища проверьте поддержку браузером localStorage и sessionStorage:
if (typeof(Storage) !== "undefined") {
// Код для localStorage/sessionStorage.
}
else {
// Прости! Нет поддержки веб хранилища.
}
Объект localStorage
Объект localStorage хранит данные без даты истечения срока действия. Данные не будут удалены при закрытии браузера и будут доступны на следующий день, неделю или год.
// Хранить
localStorage.setItem("lastname", "Smith");
// Извлечь
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Попробуйте сами »
Объяснение примера:
- Создайте пару имя/значение локального хранилища с помощью
name="lastname"иvalue="Smith" - Получить значение
"lastname"и вставьте его в элемент с помощьюid="result"
Приведенный выше пример также можно было бы написать так:
// Хранить
localStorage.lastname = "Smith";
// Извлечь
document.getElementById("result").innerHTML = localStorage.lastname;
Синтаксис для удаления "lastname" элемент localStorage выглядит следующим образом:
localStorage.removeItem("lastname");
Примечание: Пары имя/значение всегда хранятся в виде строк. Не забудьте конвертировать их в другой формат, если это необходимо!
В следующем примере подсчитывается количество нажатий кнопки пользователем. В этом коде строка значения преобразуется в число, чтобы иметь возможность увеличить счетчик:
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Вы нажали на кнопку " +
localStorage.clickcount + " time(s).";
Попробуйте сами »
Объект sessionStorage
Объект sessionStorage объект равен объекту localStorage,
кроме того, что он хранит данные только для одного сеанса.
Данные удаляются, когда пользователь закрывает определенную вкладку браузера.
В следующем примере подсчитывается количество раз, когда пользователь нажал кнопку в текущем сеансе:
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Вы нажали на кнопку " +
sessionStorage.clickcount + " time(s) в этой сессии.";
Попробуйте сами »