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 всередині циклів з великою кількістю ітерацій, оскільки це може спричинити затримки в роботі додатку. Краще оптимізувати такі операції, збираючи всі ключі заздалегідь.

Синтаксис

storage.removeItem(key);

Параметри

Return

undefined

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

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

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

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

clearCartAfterPurchase();