JavaScript свойство Window.localStorage

Определение и применение

JavaScript свойство localStorage объекта Window возвращает ссылку на локальный объект хранения (объект Storage), используемый для хранения данных, которые могут быть доступны только создавшему его источнику.

Интерфейс Storage, принадлежащий API веб-хранилища предоставляет доступ к локальному объекту хранения (localStorage), или объекту хранения текущего сеанса (sessionStorage) для определенного домена (создавшего объект хранения источника):

• sessionStorage - поддерживает отдельную область хранения для каждого заданного источника, доступную на время сеанса страницы (пока существует сеанс вкладки, включая перезагрузку и восстановление страницы).
• localStorage - делает то же самое, но сохраняется даже при закрытии и повторном открытии браузера.

Эти механизмы доступны через свойства объекта Window sessionStorage и localStorage (точнее говоря, в браузерах объект Window реализует объекты WindowLocalStorage и WindowSessionStorage, которые содержат свойства localStorage и sessionStorage). Вызов одного из этих свойств создаст экземпляр объекта Storage, с помощью которого можно устанавливать, извлекать и удалять элементы данных из хранилища. Более подробное описание этого объекта вы можете получить перейдя в раздел Storage.

Для localStorage и sessionStorage для каждого источника (сочетания схемы, хоста и порта) используется отдельный объект хранения — они функционируют и управляются отдельно друг от друга.

Поддержка браузерами

Спецификация: multipage

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Window.localStorage

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
localStorage	✓4	✓12	✓3.5	✓10.5	✓4	✓18	✓4	✓11	✓3.2	✓1.0	✓4.4	✓3.2

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const myLocalStorage = window.localStorage;

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

HTML Standard.

Исключения

Пример использования

<button>Clear localStorage</button><span id="info"></span>
<select id="colorPicker">
  <option value=""></option>
  <option value="violet">violet</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
</select>

function clearLocalStorage() {
    localStorage.clear()
    document.getElementById('colorPicker').value = ''
    document.body.style.background = '#fff'
    updateLocalStorageLength()
}

function setStyles() {
    const val = document.getElementById('colorPicker').value
    try {
        localStorage.setItem('demo_bgcolor', val)
        document.body.style.background = val
    } catch (error) {
        console.log('Ошибочка вышла', error)
    }
    updateLocalStorageLength()
}

function init() {
    const demo_bgcolor = localStorage.getItem('demo_bgcolor')

    if (demo_bgcolor) {
        document.body.style.background = demo_bgcolor
        document.getElementById('colorPicker').value = demo_bgcolor
    }
    updateLocalStorageLength()
}

function updateLocalStorageLength() {
    document.getElementById('info').innerHTML = localStorage.length
}

window.addEventListener('load', function () {
    init()
})

document.querySelector('button').addEventListener('click', function () {
    clearLocalStorage()
})

document.querySelector('select').addEventListener('change', function () {
    setStyles()
})

В этом примере с помощью обработчика события load, зарегистрированного у window через addEventListener(), мы задаем срабатывание функции init() после завершения полной загрузки страницы. Эта функция с помощью метода getItem() пытается получить значение из локального хранилища (localStorage) по указанному ключу и инициализировать переменную этим значением. Если переменная содержит значение по указанному ключу (не равна null), то мы устанавливаем элементу <body> цвет заднего фона соответствующий значению этой переменной. С помощью JavaScript метода getElementById() объекта Document выбираем элемент с определенным глобальным атрибутом id и устанавливаем этому элементу значение, содержащееся в переменной. Кроме того, мы вызываем функцию updateLocalStorageLength(), которая находит элемент с определенным id и устанавливает в качестве содержимого элемента числовое значение, которое соответствует числу элементов данных, хранящихся в хранилище.

С использованием обработчика события change, зарегистрированного через addEventListener(), установленном на элементе <select> мы при изменении значений элемента вызываем функцию setStyles(). Эта функция находит элемент <select> по id и инициализирует переменную значением этого элемента. После этого внутри конструкции try...catch с использованием метода setItem() мы пытаемся добавить или обновить ключ со значением внутри локального хранилища, содержащимся в переменной, и устанавливаем элементу <body> цвет заднего фона, соответствующий этому же значению. Если по каким-то причинам произойдет ошибка, то мы выведем эту ошибку в консоль (перехватим). Обратите внимание, что мы вызываем функцию updateLocalStorageLength().

С использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая с помощью метода clear() производит очистку всех ключей из объекта локального хранилища. Кроме того, находим элемент <select> по id и устанавливаем пустое значение, элементу <body> устанавливаем белый цвет заднего фона. После этого мы вызываем функцию updateLocalStorageLength() и обновляем информацию о числе элементов данных, хранящихся в хранилище.

Результат нашего примера:

В следующем примере мы рассмотрим совместное использование методов getItem(), setItem() и removeItem() объекта Storage.

<button>Check key</button><span id="info"></span>

function checkKey() {
    const demo_bgcolor = localStorage.getItem('demo_bgcolor'),
        info = document.getElementById('info')

    if (demo_bgcolor) {
        localStorage.removeItem('demo_bgcolor')
        info.innerHTML = 'Ключ удалён'
    } else {
        try {
            localStorage.setItem('demo_bgcolor', 'green')
            info.innerHTML = 'Ключ установлен'
        } catch (error) {
            info.innerHTML = 'Произошла ошибка ' + error.message
        }
    }
}

document.querySelector('button').addEventListener('click', function () {
    checkKey()
})

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая:

• Инициализирует две переменные, первая переменная содержит результат вызова метода getItem(), который позволяет получить значение из хранилища по указанному ключу, а вторая содержит ссылку на элемент с определенным глобальным атрибутом id.
• Если первая переменная содержит значение по указанному ключу (не равна null), то мы с помощью метода removeItem() удаляем указанный ключ из объекта хранилища и устанавливаем новое текстовое содержимое элементу, ссылку на который содержит вторая переменная.
• Если значение первой переменной соответствует значению null, то внутри конструкции try...catch с использованием метода setItem() мы пытаемся добавить ключ с произвольным строковым значением и устанавливаем новое текстовое содержимое элементу <span>. Если по каким-то причинам произойдет ошибка, то мы её перехватим, а информацию о ней добавим в качестве нового текстового содержимого элемента <span>.

Результат нашего примера: