Локальное хранение HTML

Локальное хранение HTML: лучше, чем cookies.

Что такое локальное хранение HTML?

Через локальное хранение (Local Storage) веб-приложения могут хранить данные локально в браузере пользователя.

До HTML5 данные приложений могли храниться только в cookie, включая каждый серверный запрос. Локальное хранение более безопасно и позволяет хранить большое количество данных локально, не влияя на производительность сайта.

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

Локальное хранение через источник (origin) (через домен и протокол). Все страницы, с источника, могут хранить и доступ к одному и тому же данным.

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

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

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") {
    // Код для localStorage/sessionStorage
} else {
    // Извините! Поддержка Web Storage не поддерживается..
}

Объект localStorage

Объект localStorage хранит данные без даты истечения срока. Данные не удаляются при закрытии браузера и доступны в следующий день, неделю или год.

Пример

// Хранение
localStorage.setItem("lastname", "Gates");
// Получение
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Попробуйте сами

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

  • Создание пары имя/значение для localStorage, где: name="lastname", value="Gates"
  • Получение значения "lastname" и вставка его в элемент с id="result"

Пример также можно записать так:

// Хранение
localStorage.lastname = "Gates";
// Получение
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 = "Вы уже нажали эту кнопку " +
localStorage.clickcount + " раза.";

Попробуйте сами

Объект sessionStorage

Объект sessionStorage эквивалентен объекту localStorage, различие заключается в том, что данные хранятся только на один сеанс. Если пользователь закроет конкретную вкладку браузера, данные будут удалены.

Следующий пример показывает счетчик кликов на кнопку пользователя в текущей сессии:

Пример

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "В этой сессии вы уже нажали эту кнопку " +
sessionStorage.clickcount + " раза.";

Попробуйте сами