Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



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) в этой сессии.";
Попробуйте сами »


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.