HTML5 Веб-хранилище
HTML веб-хранилище; лучше чем cookies.
Что такое HTML веб‑хранилище?
С помощью веб‑хранилища веб‑приложения могут сохранять данные локально в браузере пользователя.
До появления спецификации HTML5 данные приложений приходилось хранить в cookies, которые отправлялись на сервер при каждом запросе. Веб‑хранилище гораздо безопаснее, и позволяет сохранять большие объёмы данных локально, не влияя на работу сайта.
В отличие от cookies, лимит хранилища значительно больше (как минимум 5 МБ), и данные никогда не отправляются на сервер автоматически.
Веб‑хранилище работает по принципу «одного источника» (origin): домен + протокол. Все страницы одного источника могут сохранять и получать доступ к одним и тем же данным.
Поддержка браузерами
Цифры в таблице определяют первую версию браузера, которая полностью поддерживает веб-хранилище.
| API | |||||
|---|---|---|---|---|---|
| Веб-хранилище | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML объекты веб‑хранилища
HTML Web Storage предоставляет два объекта для хранения данных на стороне клиента:
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/value в localStorage: name = 'lastname', value = 'Smith'.
- Значение 'lastname' извлекается и вставляется в элемент с id='result'.
Тот же пример можно записать и так:
// Сохраняем
localStorage.lastname = "Smith";
// Извлекаем
document.getElementById("result").innerHTML = localStorage.lastname;
Синтаксис для удаления элемента 'lastname' из localStorage:
localStorage.removeItem("lastname");
Примечание: Пары name/value всегда сохраняются как строки. Не забывайте преобразовывать их в нужный тип, если это необходимо.
Следующий пример считает количество кликов по кнопке. В нём строковое значение преобразуется в число, чтобы можно было увеличивать счётчик:
Пример
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 + " раз в текущей сессии.";
Попробуйте сами »
