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);
}
Важно: Если хотите увидеть данный пример в работе, посмотрите наше Web Storage Demo.
Спецификации
Спецификации | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение '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, в основном из-за нехватки памяти.