Storage

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Интерфейс Storage из Web Storage API предоставляет доступ для session storage или local storage для конкретного домена, позволяя вам к примеру добавлять, изменять или удалять сохранённые элементы данных.

Если вы хотите управлять session storage для домена, вы вызываете Window.sessionStorage метод; Если вы хотите управлять local storage домена, вы вызываете Window.localStorage.

Свойства

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 Demo.

Спецификации

Specification
HTML # storage

Совместимость с браузерами

Смотрите также

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