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 Standard # storage |
Совместимость с браузерами
BCD tables only load in the browser