JavaScript метод Storage.getItem()

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

JavaScript метод getItem() объекта Storage при передаче имени ключа возвращает значение этого ключа, или null, если ключ не существует в данном объекте хранилища (Storage).

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

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

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

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

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

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

Совместимостьapi.Storage.getItem

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

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

JavaScript синтаксис

const localStorageVal = localStorage.getItem(keyName);
const sessionStorageVal = sessionStorage.getItem(keyName);

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

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

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

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