Remove a specific item from localstorage with js

Question

I am adding simple records to localstorage but I am having a hard time removing a specific item from my localstorage object. I am able to maintain the data on refresh and continue adding records no problem. I would like to add a button next to each entry that allows me to remove THAT particular record from localstorage and from my list.

How would I accomplish this given the code below?

var theLIst = document.getElementById('list'); var resetNotify = document.getElementById('reset-message'); var recordCounter = document.getElementById('record-counter'); var st = window.localStorage; var count = st.clickcount; var nameArray = []; var newArr; // Set the counter on refresh if (JSON.parse(st.getItem('names'))) { recordCounter.innerHTML = (count = JSON.parse(st.getItem('names')).length); theLIst.innerHTML = st.getItem('names').replace(/[\[\\\],"]+/g, ''); } else { recordCounter.innerHTML = (count = 0); } function addNameRecord() { resetNotify.innerHTML = ''; var name = document.getElementById('names-field'); nameArray = JSON.parse(st.getItem('names')); count = Number(count) + 1; newArr = makeArr(nameArray); // Check if there is anything in the name array. if (nameArray != null) { nameArray.push('<p class="name-entry"><strong>' + count + '. </strong> ' + name.value + '</p><button onclick="clearThisItem(\''+ name.value + '\')">Remove</button>'); } else { nameArray = []; nameArray.push('<p class="name-entry"><strong>' + count + '. </strong> ' + name.value + '</p><button onclick="clearThisItem(\''+ name.value + '\')">Remove</button>'); } st.setItem("names", JSON.stringify(nameArray)); name.value = ''; if (!newArr[0]) { count = 1; theLIst.innerHTML = nameArray; recordCounter.innerHTML = count; } else { theLIst.innerHTML = newArr[0].join(''); recordCounter.innerHTML = count; } } // Take our string from local storage and turn it into an array we can use function makeArr() { return Array.from(arguments); } // Purge all entries, reset counter function clearArray() { st.clear(); nameArray = []; theLIst.innerHTML = ''; recordCounter.innerHTML = (count = 0); resetNotify.innerHTML = 'Array has been purged.'; }

Heres the code I tried

 // Delete a specific entry function clearThisItem(item) { console.log(item); localStorage.removeItem(item); console.log(localStorage.removeItem(item)) return item; }

yes, not included in my code below but it did not work, I am able to clear the entire object but not a specific item, not sure why — Vladimir Mujakovic
– Vladimir Mujakovic, Commented May 23, 2018 at 1:24
You should show the code that you tried. .removeItem() is the correct way, so you must be using it incorrectly. — Scott Marcus
– Scott Marcus, Commented May 23, 2018 at 1:24

Shivaji Varma · Accepted Answer · 2018-05-23 02:59:34Z

Here is refactored code.

Firstly there is no need to store count, as we always have access to names.length
Store only names on localStorage, not entire HTML
For add and remove a name, fetch names array from localStorage, update it and save it back to localStorage.
After every action just update the UI using a single function call.

Note: Renamed names-field to name-field in the below implementation.

Here is the working code: https://jsbin.com/simitumadu/1/edit?html,js,output

var $list = document.getElementById('list'); var $resetMessage = document.getElementById('reset-message'); var $resetCouter = document.getElementById('record-counter'); var names = getNames(); if(names == null){ setNames([]); // initializing the empty array for first time. } renderData(); // display data function addNameRecord() { $resetMessage.innerHTML = ''; var name = document.getElementById('name-field'); addName(name.value); renderData(); name.value = ''; //clear input field } function renderData(){ var names = getNames(); $resetCouter.innerText = names.length; // Count var namesListHTML = ''; names.forEach(function(name, index){ namesListHTML = namesListHTML + '<p class="name-entry"><strong>' + (index + 1) + '. </strong> ' + name + '</p><button onclick="clearThisItem(\'' + name + '\')">Remove</button>' }); $list.innerHTML = namesListHTML; } function clearArray() { setNames([]); // clear names $resetMessage.innerHTML = 'Array has been purged.'; renderData(); } function clearThisItem(name){ removeName(name); // remove from localStorage renderData(); } function getNames(){ namesStr = localStorage.getItem('names'); if(namesStr) { return JSON.parse(namesStr); } return null; } function setNames(names){ return localStorage.setItem('names', JSON.stringify(names)); } function addName(name){ var names = getNames(); names.push(name); setNames(names); } function removeName(name){ var names = getNames(); var index = names.indexOf(name); if (index > -1) { names.splice(index, 1); } setNames(names); }

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <p>Count : <span id="record-counter"></div></p> <input id="name-field"> <button onclick="addNameRecord()">Add</button> <button onclick="clearArray()">Clear</button> <div id="list"></div> <div id="reset-message"></div> </body> </html>

Scain40 · Accepted Answer · 2018-05-23 01:30:56Z

Use localStorage.removeItem(insertYourKeyHere); to remove an object from local storage.
For removing it from your nameArray you can search through your list for the record, set null and then sort your list by ensuring to move objects into new positions such that null is at the end, then decrement your count for the number of records

Im trying to pass the key in via a function but it simply will not remove it, I do not understand
if i pass in "names" which is the name of my object, using removeItem removes the entire object not just a specific instance of it.

Collectives™ on Stack Overflow

Remove a specific item from localstorage with js

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related