CODEWITHSUNDEEP
javascriptjson
clement
clement

Reputation: 13

How to delete and object from localstorage?

I'm using localStorage to store many objects in an array. Is it possible to delete only one object from this array?

I can delete the entire array if I use localstorage.removeItem(keysofthelocalstorage); however, I only want to delete the item I don't need.

For example, if the key of my entry in local storage is basketContent, and my value looks like [{object1},{object2},{object3}], how can I delete {object1}? Do I need to use a different key to reference this object in the array?

I can get the object I want from the array if I click the "delete" button, but I can't delete it. I've tried using slice, but haven't been able to get it working. Here's my code:

let basketContent = JSON.parse(localStorage.getItem("basketContent")); //Json parse convertie en json
// console.log(basketContent);
if(basketContent !== null) { 
   for(let i = 0; i<basketContent.length; i++) {
      const tabsLine = document.createElement("tr");
      const deleteButton = document.createElement("button");
      deleteButton.setAttribute("class", "btn btn-danger mt-1") ;
      deleteButton.innerHTML = "delete";
      const tbody = document.getElementById("bodytabs");
      tbody.appendChild(tabsLine);
      tabsLine.appendChild(deleteButton);
      console.log(basketContent);
  
      /////////////////////// on click ///////////////////////
      deleteButton.addEventListener("click", function() {
         console.log(baksketContent); //give the objects array
         console.log(basketContent[i]);// give me one object 
      });
   }
} else {
   console.log("empty busket");
}

Upvotes: 1

Views: 91

Answers (2)

clement
clement

Reputation: 13

Hi thanks a lot for your answer it work perfectly, i put my code with the correction if someone need it or if it can help someone.

const basketContent = JSON.parse(localStorage.getItem("basketContent")); 
   // console.log(basketContent);
    if(basketContent !== null){ 

        for(let i = 0; i<basketContent.length; i++){
        
            const tabsLine = document.createElement("tr");
           
            const deleteButton = document.createElement("button");
            deleteButton.setAttribute("class", "btn btn-danger mt-1") ;
            deleteButton.innerHTML = "delete";
            const tbody = document.getElementById("bodytabs");
            tbody.appendChild(tabsLine); 
            tabsLine.appendChild(deleteButton);
            /////////////////////// on click ///////////////////////         
            deleteButton.addEventListener("click", function(){
                const parsed = JSON.parse(localStorage.getItem('basketContent'));
                parsed.splice(parsed.indexOf(parsed[i]), 1);
                localStorage.setItem('basketContent', JSON.stringify(parsed));
            });           
        }
    }else{
        console.log("empty busket");
      
    }

Upvotes: 0

user14520680
user14520680

Reputation:

First, parse the JSON string you stored, delete the object there and store the new array in localStorage.

const parsed = JSON.parse(localStorage.getItem('basketContent'));
parsed.splice(parsed.indexOf(/*your object*/), 1);
localStorage.setItem('basketContent', JSON.stringify(parsed));

Upvotes: 3

Related Questions