Хранилище

Интерфейс Storage API веб-хранилища предоставляет доступ к сессионному или локальному хранилищу определенного домена. Он позволяет, например, добавлять, изменять или удалять сохранённые данные.

Для управления, например, сессионным хранилищем домена, выполняется вызов Window.sessionStorage; для локального хранилища — вызов Window.localStorage.

Storage.length Только для чтения

Возвращает целое число, представляющее количество сохранённых данных в объекте Storage.

Storage.key()

При передаче числа n, этот метод вернёт имя n-го ключа в хранилище.

Storage.getItem()

При передаче имени ключа, вернёт значение этого ключа.

Storage.setItem()

При передаче имени ключа и значения, добавит этот ключ в хранилище или обновит значение ключа, если он уже существует.

Storage.removeItem()

При передаче имени ключа, удалит этот ключ из хранилища.

Storage.clear()

При вызове очистит все ключи в хранилище.

Здесь мы получаем доступ к объекту Storage вызывая localStorage. Сначала мы проверяем, содержит ли локальное хранилище элементы данных, используя !localStorage.getItem('bgcolor'). Если содержит, мы запускаем функцию setStyles(), которая получает элементы данных, используя Storage.getItem(), и использует эти значения для обновления стилей страницы. Если нет, мы запускаем другую функцию, populateStorage(), которая использует Storage.setItem() для установки значений элементов, затем запускает setStyles().

if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

function setStyles() {
  const currentColor = localStorage.getItem("bgcolor");
  const currentFont = localStorage.getItem("font");
  const currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = `#${currentColor}`;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}

• Использование API веб-хранилища
• Window.localStorage
• Window.sessionStorage
• CacheStorage