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().

js
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

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

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Storage
clear
getItem
key
length
removeItem
setItem

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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