localStorage.removeItem() — видалити ключ зі сховища

Загальний опис

removeItem – це метод об'єкта Storage, який видаляє з локального або сеансового сховища (localStorage або sessionStorage) елемент за вказаним ключем. Використовується, коли потрібно очистити збережені дані для певного ключа без впливу на інші дані в сховищі.

Метод приймає один обов’язковий параметр key, який є рядком ідентифікатора, що вказує, який саме елемент видалити. Якщо ключ існує в сховищі, відповідне значення видаляється. Якщо ключа немає, метод просто ігнорує операцію без помилки, що забезпечує надійність при роботі з потенційно відсутніми даними.

// Приклад: видалення даних користувача з локального сховища
localStorage.setItem("username", "Іван");
localStorage.removeItem("username"); // Видаляє запис з ключем "username"

Метод працює на рівні об’єктів localStorage або sessionStorage, які є частиною API Web Storage і доступні в сучасних браузерах. localStorage зберігає дані постійно, доки їх не видалить користувач або додаток, тоді як sessionStorage зберігає дані лише протягом сесії (зазвичай до закриття вкладки). Тому використання removeItem в localStorage буде зручним для видалення інформації, яка більше не потрібна між сесіями, наприклад, після виходу користувача з облікового запису.

Варто зазначити, що removeItem не видаляє дані, які мають інші ключі; це дозволяє чітко керувати окремими значеннями. Наприклад, якщо додаток зберігає кілька налаштувань користувача під різними ключами, removeItem допоможе видаляти лише обрані налаштування, залишаючи інші без змін.

// Видалення всіх записів за кількома ключами
sessionStorage.setItem("theme", "dark");
sessionStorage.setItem("fontSize", "medium");

// Видаляємо конкретний запис
sessionStorage.removeItem("theme"); // Залишаємо "fontSize" без змін

removeItem є синхронним, тобто виконання його операцій відбувається відразу ж без додаткових затримок, що є корисним для простого очищення даних. Втім, не варто використовувати removeItem всередині циклів з великою кількістю ітерацій, оскільки це може спричинити затримки в роботі додатку. Краще оптимізувати такі операції, збираючи всі ключі заздалегідь.

правити

Порада

Пам’ятайте, що removeItem видаляє лише значення за ключем, але структура об'єкта сховища залишається. Це дозволяє зберігати інші дані в сховищі, які не впливатимуть на поточний метод. Якщо ж потрібно видалити всі записи, варто використовувати метод clear().

автор: Bond правити

Порада

Якщо вам потрібно видалити декілька записів за різними ключами, краще використовувати removeItem послідовно для кожного ключа. Це дозволяє точніше контролювати, що саме буде видалено.

автор: Bond правити

Порада

Рекомендується перевірити вміст сховища перед і після використання removeItem, особливо під час розробки. Ви можете зробити це за допомогою console.log(localStorage) або console.log(sessionStorage), щоб побачити зміни й переконатися, що видалено саме потрібний елемент.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

storage.removeItem(key);

Повернення

undefined

Метод removeItem не повертає жодного значення. Він виконується без повернення результату, тобто його повертає undefined. Якщо ключ, переданий як аргумент методу, існує в сховищі, то відповідне значення буде видалене. Якщо ж такого ключа немає, метод просто нічого не робить і не викликає помилок.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	4	3.5	4	10.5	12	8

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	6	3.2

Підтримка: серверні переглядачі

Переглядач
	1.10

Приклади

+ запропонувати свій приклад у пісочниці

// Динамічне очищення даних корзини покупок після оформлення замовлення
function clearCartAfterPurchase() {
  const cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];

  cartItems.forEach(item => {
    localStorage.removeItem(`product_${item.id}`);
  });

  localStorage.removeItem("cartItems");
  console.log("Корзину очищено після успішного оформлення замовлення");
}

clearCartAfterPurchase();

<header>
  <h2 class="title">Використання Storage -> removeItem</h2>
  <p class="description">Цей приклад показує, як додавати та видаляти елементи в локальному сховищі за допомогою removeItem.</p>
</header>
<main>
  <div class="result">
    <div>
      <label for="itemInput">Введіть елемент для збереження:</label>
      <input type="text" id="itemInput" />
      <button id="addItemBtn">Додати елемент</button>
    </div>
    <div>
      <h3>Збережені елементи:</h3>
      <ul id="itemList"></ul>
    </div>
    <div>
      <button id="clearAllBtn">Очистити всі елементи</button>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

input {
  padding: 5px;
  margin-right: 10px;
}

button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
}

li button {
  background-color: #f44336;
  margin-left: 10px;
}

// Отримуємо елементи DOM
const addItemBtn = document.getElementById('addItemBtn');
const itemInput = document.getElementById('itemInput');
const itemList = document.getElementById('itemList');
const clearAllBtn = document.getElementById('clearAllBtn');

// Функція для оновлення списку збережених елементів
function updateItemList() {
  itemList.innerHTML = ''; // Очищаємо список
  const keys = Object.keys(localStorage); // Отримуємо всі ключі з localStorage
  keys.forEach(key => {
    const li = document.createElement('li');
    li.textContent = key;
    const removeBtn = document.createElement('button');
    removeBtn.textContent = 'Видалити';
    removeBtn.addEventListener('click', () => {
      localStorage.removeItem(key); // Видаляємо елемент за ключем
      updateItemList(); // Оновлюємо список після видалення
    });
    li.appendChild(removeBtn);
    itemList.appendChild(li);
  });
}

// Додаємо новий елемент в localStorage
addItemBtn.addEventListener('click', () => {
  const newItem = itemInput.value.trim();
  if (newItem) {
    localStorage.setItem(newItem, newItem); // Зберігаємо елемент
    itemInput.value = ''; // Очищаємо поле вводу
    updateItemList(); // Оновлюємо список
  }
});

// Очищаємо всі елементи з localStorage
clearAllBtn.addEventListener('click', () => {
  localStorage.clear(); // Очищаємо все з localStorage
  updateItemList(); // Оновлюємо список
});

// Ініціалізуємо список елементів при завантаженні сторінки
updateItemList();
//# sourceURL=pen.js

// Видалення токену доступу після завершення терміну дії
const tokenExpiry = localStorage.getItem("tokenExpiry");

if (tokenExpiry && Date.now() > Number(tokenExpiry)) {
  localStorage.removeItem("accessToken");
  localStorage.removeItem("tokenExpiry");
  console.log("Токен доступу видалено через завершення терміну дії");
}