JavaScript свойство Storage.length

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

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

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

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

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

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

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

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

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

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

JavaScript синтаксис

const localStorageLength = localStorage.length;
const sessionStorageLength = sessionStorage.length;

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

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() и обновляем информацию о числе элементов данных, хранящихся в хранилище.

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

В следующем примере мы рассмотрим совместное использование методов 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> на каждой итерации цикла.

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