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