Storage

Интерфейс 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);
}

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Все браузеры имеют различную вместимость для localStorage и sessionStorage. Вот подробное сравнение всех storage для различных браузеров.

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

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