HTML5 Web Storage - Веб-хранилище
Курс по основам HTML5. W3Schools на русском языке. Уроки для начинающих
HTML веб-хранилище; лучше чем cookies.
Что такое HTML веб-хранилище?
С помощью веб-хранилища веб-программы могут сохранять данные локально в браузере пользователя.
До появления спецификации HTML5, данные приложений должны были сохраняться в куках (cookies), включенных в каждом запросе сервера. Веб-хранилище является более безопасным, и большие объёмы данных могут сохраняться локально, не влияя на работу веб-сайта.
В отличие от файлов 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");
Попробуйте сами »
Объяснение примера:
- Создаём пару localStorage name/value (имя/значение) с 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 + " раз.";
Попробуйте сами »
Объект sessionStorage
Объект sessionStorage соответсвует объекту localStorage, кроме того, что он сохраняет данные лишь для одного сеанса. Данные удаляются, когда пользователь закрывает определённую вкладку веб-браузера.
В следующем примере подсчитывается количество раз, когда пользователь нажал кнопку в текущей сесии:
Пример:
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Вы нажали кнопку " +
sessionStorage.clickcount + " раз в этой сесии.";
Попробуйте сами »