JavaScript метод Storage.removeItem()

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

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

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

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

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

JavaScript синтаксис:

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

keyName - String
localStorage, sessionStorage - Storage

Версия JavaScript

HTML Living Standard

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

Параметр	Описание
keyName	Строковое значение, содержащее имя ключа, который вы хотите удалить. Обязательный параметр.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование методов removeItem(), setItem() и removeItem() объекта Storage</title>
	</head>
	<body>
		<button onclick = "checkKey()">Check key</button> <!-- добавляем атрибут событий onclick -->
		<span id = "info"></span>
		<script>
	function checkKey() {
	  const demo_bgcolor = localStorage.getItem("demo_bgcolor"), // получаем значение из хранилища по указанному ключу
                info = document.getElementById("info"); // производим поиск элемента по id и инициализируем переменную

	  if(demo_bgcolor) { // если переменная содержит значение по указанному ключу (не равна null)
	    localStorage.removeItem("demo_bgcolor"); // удаляем ключ из объекта хранилища
	    info.innerHTML = "Ключ удалён"; // изменяем содержимое элемента
	  } else {
	    try { // пытаемся выполнить код
	      localStorage.setItem("demo_bgcolor", "green"); // добавляем ключ с произвольным строковым значением 
	      info.innerHTML = "Ключ установлен"; // изменяем содержимое элемента
	    } catch (error) { // перехватываем и обрабатываем ошибку
	      info.innerHTML = "Произошла ошибка " + error.message; // изменяем содержимое элемента
	    }
	  }
	}
		</script>
	</body>
</html>

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

Инициализирует две переменные, первая переменная содержит результат вызова метода getItem(), который позволяет получить значение из хранилища по указанному ключу, а вторая содержит ссылку на элемент с определенным глобальным атрибутом id.
Если первая переменная содержит значение по указанному ключу (не равна null), то мы с помощью метода removeItem() удаляем указанный ключ из объекта хранилища и устанавливаем новое текстовое содержимое элементу, ссылку на который содержит вторая переменная.
Если значение первой переменной соответствует значению null, то внутри конструкции try...catch с использованием метода setItem() мы пытаемся добавить ключ с произвольным строковым значениеми и устанавливаем новое текстовое содержимое элементу <span>. Если по каким-то причинам произойдет ошибка, то мы её перехватим, а информацию о ней добавим в качестве нового текстового содержимого элемента <span>.

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

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

JavaScript Storage