MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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

Спецификации Статус Комментарий
Web Storage (Second edition)
Определение 'Storage' в этой спецификации.
Рекомендация  

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

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

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

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