Clearing Localstorage in JavaScript

Clearing localStorage in javascript?

Use this to clear localStorage:

localStorage.clear();

Clearing local storage in JavaScript

In your clearTask event listener you have to also clear your itemsLocal array.

clearTask.addEventListener('click', () =>{
    localStorage.removeItem("items");
    itemsLocal.length = 0; // clear it here... (you got to add this line)
    userData.length = 0;
    while (ul.firstChild) {
        ul.removeChild(ul.firstChild);
    }
});

Currently, since you're not clearing it, you're adding the new value to the array which still contains the old values and are storing it to local storage.

form.addEventListener('submit',(e) => {
    e.preventDefault();

    // 'itemsLocal' still has your old values here and you're just appending to it
    itemsLocal.push(task.value);

    // storing old items and the new one in the local storage here
    localStorage.setItem("items", JSON.stringify(itemsLocal));

    // you're rendering only the currently added item so you get the
    // fake feeling that your list is fine and that local storage has issues
    addTask(task.value);  
    
    // Clear input field
    task.value = '';
});

Looking for a way to clear localstorage periodically in javascript

1. Add a field such as expiryDate in your local storage object
2. Add a instruction to check that date once your application starts up
3. Clear the local storage object if currentDate > expiryDate

function setStorage() {
  // Current date - 1 day = yesterday +
  const expiryDate = new Date().setDate(new Date().getDate() - 1); // Milliseconds
  const payload = { expiryDate, otherData: {} };
  localStorage.setItem("your-data-key", JSON.stringify(payload));
}

function checkStorage() {
  const storage = JSON.parse(localStorage.getItem("your-data-key"));
  const currentDate = new Date().getTime(); // Current date in milliseconds

  if (currentDate > storage.expiryDate) {
    console.log("YOUR STORAGE IS EXPIRED PLEASE REMOVE IT");
    // Uncomment to remove the item from localSotarage
    // localStorage.removeItem("your-data-key");
    // console.log("STORAGE REMOVED");
  }

  return storage;
}

setStorage();
checkStorage();

How to delete a localStorage item when the browser window/tab is closed?

should be done like that and not with delete operator:

localStorage.removeItem(key);

How to remove and clear all localStorage data

localStorage.clear();

should work.

Clear local storage on session clear

Use sessionStorage. It has the same methods as localStorage, but it clears when the session is cleared.

How to clear localStorage? (JavaScript/jQuery)

Instead of checking a specific property, check the length

if (localStorage.length > 0 ) {
    localStorage.clear();
} 

localStorage is an implementation of Storage interface and Storage has a property called length

Storage.length

Returns an integer representing the number of data items stored in the
Storage object.

---

Related Topics