JavaScript метод Storage.clear()

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

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

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`clear()`	Да	Да	Да	Да	8.0	Да

JavaScript синтаксис:

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

localStorage, sessionStorage - Storage

Версия JavaScript

HTML Living Standard

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование методов getItem(), setItem() и clear() объекта Storage</title>
	</head>
	<body onload = "init()"> <!-- добавляем атрибут событий onload -->
		<button onclick = "clearLocalStorage()">Clear localStorage</button> <!-- добавляем атрибут событий onclick -->
		<span id = "info"></span>
		<select id = "colorPicker" onchange = "setStyles()"> <!-- добавляем атрибут событий onchange -->
		        <option value = ""></option>
		        <option value = "violet">violet</option>
		        <option value = "green">green</option>
		        <option value = "blue">blue</option>
		</select>
		<script>
	function clearLocalStorage() {
	  localStorage.clear(); // производим очистку всех ключей из объекта хранилища
	  document.getElementById("colorPicker").value = ""; // устанавливаем элементу с переданным id "пустое" значение
	  document.body.style.background = "#fff"; // устанавливаем элементу <body> белый цвет заднего фона
	  updateLocalStorageLength(); // обновляем информацию о числе элементов данных, хранящихся в хранилище
	}

	function setStyles() {
	  const val = document.getElementById("colorPicker").value; // находим элемент по id и инициализируем переменную значением этого элемента
	  try { // пытаемся выполнить код
	    localStorage.setItem("demo_bgcolor", val); // добавляем или обновляем ключ со значением, содержащимся в переменной val
	    document.body.style.background = val; // устанавливаем элементу <body> цвет заднего фона
	  } catch(error) { // перехватываем и обрабатываем ошибку
	    console.log("Ошибочка вышла", error) // выводим в консоль ошибку
	  }
	  updateLocalStorageLength(); // обновляем информацию о числе элементов данных, хранящихся в хранилище 
	} 

	function init() {
	  const demo_bgcolor = localStorage.getItem("demo_bgcolor"); // получаем значение из хранилища по указанному ключу

	  if(demo_bgcolor) { // если переменная содержит значение по указанному ключу (не равна null)
	    document.body.style.background = demo_bgcolor; // устанавливаем элементу <body> цвет заднего фона
	    document.getElementById("colorPicker").value = demo_bgcolor; // устанавливаем элементу с переданным id значение, содержащееся в переменной demo_bgcolor
	  }
	  updateLocalStorageLength(); // обновляем информацию о числе элементов данных, хранящихся в хранилище  
	}
	function updateLocalStorageLength() {
	  document.getElementById("info").innerHTML = localStorage.length; // устанаваливаем в качестве содержимого элемента с определенным id числовое значение, которое соответствует числу элементов данных, хранящихся в хранилище
	}
		</script>
	</body>
</html>

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

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

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

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

Пример использования методов getItem(), setItem() и clear() объекта Storage

JavaScript Storage