Storage

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

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

Storage.key()

Приняв число n, метод вернёт имя n-ного ключа в Storage

Storage.getItem()

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

Storage.setItem()

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

Storage.removeItem()

Приняв имя ключа, метод удалит этот ключ из Storage

Storage.clear()

При вызове метод удалит все ключи из Storage.

В данном примере мы получаем доступ к объекту Storage вызывая localStorage. Для начала мы проверяем содержит ли local storage элементы данных используя !localStorage.getItem('bgcolor'). Если да, мы вызываем функцию setStyles() которая получает элементы данных используя localStorage.getItem() и использует их значения для обновления стилей на странице. Если нет, мы вызывает другую функцию, populateStorage(), которая использует localStorage.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() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var 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);
}

Используя Web Storage API