JavaScript метод Storage.clear()

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

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

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

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

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

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

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

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

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

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

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

JavaScript синтаксис

localStorage.clear();
sessionStorage.clear();

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

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

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