JS метод Storage.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

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

Переглядач
	37	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();

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

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