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

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

Спецификации Статус Комментарий
HTML Living Standard
Определение 'Storage' в этой спецификации.
Живой стандарт  

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

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!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 ? 8 11 iOS 3.2

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

Важно: Начиная с iOS 5.1, Safari Mobile хранит данные localStorage в папке кэша, которая является объектом для периодических чисток по желанию OS, в основном из-за нехватки памяти.

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

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

Метки документа и участники

Внесли вклад в эту страницу: jwhitlock, chulanovskyi, DavidWebb, teoli, ThijsK
Обновлялась последний раз: jwhitlock,