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

Answer 1

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>

Answer 2

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