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;
    }

Have you tried **[`localStorage.removeItem()`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem)**? — Scott Marcus, May 23 '18 at 01:23
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, May 23 '18 at 01:24
You should show the code that you tried. `.removeItem()` is the correct way, so you must be using it incorrectly. — Scott Marcus, May 23 '18 at 01:24
@VladimirMujakovic: you are not storing names independently on the localStorage. You have stored an entire array in a single localStorage item. So you cannot delete using localStorage.removeItem. You must be updating the array and insert it back into the localStorage. — Shivaji Varma, May 23 '18 at 02:08
yeah, that occured to me too haha. I guess i should probably start over :/ — Vladimir Mujakovic, May 23 '18 at 02:17
@VladimirMujakovic: also you are storing entire HTML paragraph in localStorage, which is not necessary. You can simply store name, and construct the paragraph from it everytime you want to render. PS: localStorage is limited :) — Shivaji Varma, May 23 '18 at 02:25

score 2 · Accepted Answer · answered May 23 '18 at 02:59

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>

score 0 · Answer 2 · answered May 23 '18 at 01:30

0

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

answered May 23 '18 at 01:30

Scain40

21
3

Im trying to pass the key in via a function but it simply will not remove it, I do not understand – Vladimir Mujakovic May 23 '18 at 01:37
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. – Vladimir Mujakovic May 23 '18 at 02:07

Remove a specific item from localstorage with js

2 Answers2

Linked