JavaScript метод Storage.setItem()

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

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

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

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

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

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

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

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

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

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

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

JavaScript синтаксис

localStorage.setItem(keyName, keyValue);
sessionStorage.setItem(keyName, keyValue);

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

HTML Standard.

Значения параметров

Исключения

Ключи и значения преобразуются в строки. Для объектов используйте JSON.stringify(), при чтении — JSON.parse(). Доступ к самому localStorage или sessionStorage может вызвать SecurityError, если источник или политика браузера запрещают хранение.

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

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

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

В следующем примере мы рассмотрим совместное использование методов setItem(), key() и свойства length.

<button>Show keys</button><span id="info"></span>

function showKeys() {
    let info = document.getElementById('info')

    for (let i = 0; i < 5; i++) {
        let key = 'demo_key_' + i
        let val = i
        try {
            sessionStorage.setItem(key, val)
        } catch (error) {
            info.innerHTML = 'Произошла ошибка ' + error.message
        }
    }

    for (let i = 0; i < sessionStorage.length; i++) {
        let currentKeyValue = sessionStorage.key(i)
        info.innerHTML += '<p>Ключ под индексом ' + i + ' равен <b>' + currentKeyValue + '</b></p>'
    }
}

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

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

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

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