css.in.ua
Підтримати

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().
Порада:

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

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

Синтаксис

storage.removeItem(key);

Параметри

Return

undefined

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

Переглядачі

Переглядач

4

3.5

4

10.5

12
Переглядач

37

18

6

3.2
Переглядач

-

1.10

Приклади


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

У цьому прикладі відбувається видалення токену доступу після того, як термін його дії минув. Цей підхід корисний для управління авторизацією користувачів, коли треба видаляти старі токени з localStorage для безпеки.

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

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

Цей приклад показує видалення даних кошика покупок після завершення покупки. Зберігаючи товари під окремими ключами, ми можемо видаляти лише дані про конкретні продукти, а також сам ключ cartItems, що дозволяє зберігати інші дані в localStorage без змін.

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

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

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

clearCartAfterPurchase();

Спільнота

Зв'язок