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

HTML API веб-хранилища — лучше, чем файлы cookie.

---

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

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

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

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

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

---

Объекты API веб‑хранилища

Веб‑хранилище предоставляет два объекта для хранения данных в браузере:

• window.localStorage — хранит данные без срока действия (данные не теряются при закрытии вкладки браузера);
• window.sessionStorage — хранит данные в течение одной сессии (данные теряются при закрытии вкладки браузера).

---

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

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

API
localStorage	4.0	8.0	3.5	4.0	11.5
sessionStorage	4.0	8.0	3.5	4.0	11.5

---

Проверка поддержки API веб‑хранилища

Перед использованием веб‑хранилища можно быстро проверить поддержку браузером объектов localStorage и sessionStorage.

Пример

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

<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
  x.innerHTML = "Ваш браузер поддерживает веб‑хранилище!";
} else {
  x.innerHTML = "К сожалению, веб‑хранилище не поддерживается!";
}
</script>

---

Объект localStorage

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

Пример

Использование localStorage для установки и получения пар «имя‑значение»:

<script>
const x = document.getElementById("result");

if (typeof(Storage) !== "undefined") {
  // Сохранение данных
  localStorage.setItem("lastname", "Smith");
  localStorage.setItem("bgcolor", "yellow");
  // Получение данных
  x.innerHTML = localStorage.getItem("lastname");
  x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
  x.innerHTML = "К сожалению, веб‑хранилище не поддерживается!";
}
</script>

Пояснение к примеру:

• Используем метод localStorage.setItem(), чтобы создать пары «имя‑значение».
• Используем метод localStorage.getItem(), чтобы получить сохранённые значения.
• Получаем значение «lastname» и вставляем его в элемент с id=»result».
• Получаем значение «bgcolor» и установливаем его как цвет фона элемента с id=»result».

Синтаксис удаления элемента localStorage с именем «lastname» выглядит следующим образом:

localStorage.removeItem("lastname");

Примечание: Пары имя/значение всегда хранятся в виде строк. При необходимости не забывайте преобразовывать их в другой формат!

---

Подсчёт кликов с использованием localStorage

Следующий пример подсчитывает, сколько раз пользователь нажал кнопку. В этом коде строковое значение преобразуется в число, чтобы можно было увеличить счётчик.

Пример

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount) + 1;
    } else {
      localStorage.clickcount = 1;
    }
    x.innerHTML = "Вы нажали кнопку " + localStorage.clickcount + " раз(а)!";
  } else {
    x.innerHTML = "К сожалению, веб‑хранилище не поддерживается!";
  }
}
</script>

---

Объект sessionStorage

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

Подсчёт кликов с использованием sessionStorage

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

Пример

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
    } else {
      sessionStorage.clickcount = 1;
    }
    x.innerHTML = "Вы нажали кнопку " + sessionStorage.clickcount + " раз(а) в этой сессии!";
  } else {
    x.innerHTML = "К сожалению, веб‑хранилище не поддерживается!";
  }
}
</script>