Учебник по HTML

HTML ГЛАВНАЯ Введение в HTML HTML-редакторы Базовый HTML HTML-элементы HTML-атрибуты HTML-заголовки HTML-абзацы HTML-стили HTML-форматирование HTML-цитаты HTML-комментарии Цвета HTML HTML CSS HTML-ссылки HTML-изображения HTML Фавикон HTML-таблицы HTML-списки Блок HTML и встроенный HTML-классы HTML-идентификатор HTML-фреймы HTML JavaScript Пути HTML-файлов HTML-голова HTML-макет HTML Отзывчивый HTML компьютерный код HTML-семантика Руководство по стилю HTML HTML-сущности HTML-символы HTML-смайлики HTML-кодировка HTML-кодирование URL-адреса HTML против XHTML

HTML -формы

HTML-формы Атрибуты HTML-формы HTML-элементы формы Типы ввода HTML Атрибуты ввода HTML Атрибуты формы ввода HTML

HTML- графика

HTML-холст HTML SVG

HTML- медиа

HTML-медиа HTML-видео HTML-аудио HTML-плагины HTML YouTube

HTML -API

HTML-геолокация Перетаскивание HTML Веб-хранилище HTML Веб-воркеры HTML HTML SSE

HTML- примеры

HTML-примеры HTML-викторина HTML-упражнения HTML-сертификат Резюме HTML Доступность HTML

HTML -ссылки

Список тегов HTML HTML-атрибуты Глобальные атрибуты HTML Поддержка HTML-браузера HTML-события Цвета HTML HTML-холст HTML-аудио/видео Типы документов HTML Наборы символов HTML HTML-кодирование URL-адреса Языковые HTML-коды HTTP-сообщения HTTP-методы Конвертер PX в EM Горячие клавиши

API веб-хранилища HTML


веб-хранилище HTML; лучше, чем печенье.


Что такое веб-хранилище HTML?

С помощью веб-хранилища веб-приложения могут хранить данные локально в браузере пользователя.

До появления HTML5 данные приложения должны были храниться в файлах cookie, которые включались в каждый запрос к серверу. Веб-хранилище более безопасно, и большие объемы данных можно хранить локально, не влияя на производительность веб-сайта.

В отличие от файлов cookie, предел хранения намного больше (не менее 5 МБ), и информация никогда не передается на сервер.

Веб-хранилище для каждого источника (для каждого домена и протокола). Все страницы из одного источника могут хранить и получать доступ к одним и тем же данным.


Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает веб-хранилище.

API
Web Storage 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 хранит данные без даты истечения срока действия. Данные не будут удалены при закрытии браузера и будут доступны на следующий день, неделю или год.

Пример

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Объяснение примера:

  • Создайте пару имя/значение localStorage с name="lastname" и value="Smith"
  • Получите значение "lastname" и вставьте его в элемент с id="result"

Приведенный выше пример также можно было бы написать так:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

Синтаксис удаления элемента localStorage «lastname» следующий:

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.";