Clear all or selected items from Local Storage

This post will discuss how to clear all or selected items from the localStorage.

Local Storage is a web storage feature that allows us to store data in the browser, even after the browser is closed or page is refreshed. Local Storage is useful for saving user preferences, settings, or data across multiple sessions or pages. However, sometimes we may want to clear all or selected items from Local Storage, either to free up some space, reset some values, or remove some sensitive information.

1. Using `localStorage.clear()` method

The built-in method to clear all items from Local Storage in JavaScript is the localStorage.clear() method. It removes all key-value pairs from the Local Storage object for the current domain. A key-value pair is a pair of strings that represents a property name and its value. To clear all items from Local Storage using localStorage.clear(), we need to call the localStorage.clear() method with no arguments. The localStorage.clear() method returns undefined. Here is an example of its usage:

// Set some key-value pairs in Local Storage

localStorage.setItem("name", "Cassey");

localStorage.setItem("age", "22");

localStorage.setItem("occupation", "Developer");

// Call the `localStorage.clear()` method

localStorage.clear();

// Log the number of items in Local Storage

console.log(localStorage.length); // 0

2. Using `localStorage.removeItem()` method

To remove a specific key from the local storage object for the current domain, we can use the localStorage.removeItem() method. It takes a key as an argument and removes the corresponding key-value pair from Local Storage. The localStorage.removeItem() method returns undefined. Here is an example of its usage:

// Put some key-value pairs in Local Storage

localStorage.setItem("age", "25");

// Log the value of the age

console.log(localStorage.getItem("age")); // 25

// Pass the key of the item that we want to remove to the `localStorage.removeItem()` method

localStorage.removeItem("age");

// Log the value of the removed item

console.log(localStorage.getItem("age")); // null

3. Using a loop

Another way to clear selected items from Local Storage is to use a for loop or a forEach loop to iterate over the keys and remove them one by one using the localStorage.removeItem() method. This way we can clear only the items that match some condition, such as a prefix or a suffix of the key. For example:

// Using a forEach loop

Object.keys(localStorage).forEach(key => {

// Check if the key matches some condition

if (key.endsWith("id")) {

// Remove the key-value pair

localStorage.removeItem(key);

}

});

Note that all above methods do not affect the Local Storage items from any other domain than the current one. For example, if we are on “example.com” and clear our Local Storage, they will not affect the Local Storage items from “another.com”.

That’s all about clearing all or selected items from Local Storage.

Clear all or selected items from Local Storage

1. Using localStorage.clear() method

2. Using localStorage.removeItem() method

3. Using a loop

Share this:

1. Using `localStorage.clear()` method

2. Using `localStorage.removeItem()` method