Removing local storage item with vanilla javascript

Question

I'm working on a simple to-do list with vanilla js. I've managed to add the input to local storage, but have not been able to add the style changes(check strike through) to local storage, nor can I figure out how to remove one item at a time from storage. I have been able to clear all, just unable to remove each item separately. Below is my code, any advice is greatly appreciated.

//local storage setup
let saved = window.localStorage.getItem(input.value);

if (saved) {
    list.innerHTML = saved;
}

//handle input submit
function handleSubmitForm(e) {
    e.preventDefault();
    let input = document.querySelector('input');
    if (input.value != '') {
        addTodo(input.value);
    }
    input.value = '';
    window.localStorage.setItem(input.value, list.innerHTML);
}

//check off todo
function checkTodo(e) {
    let item = e.target.parentNode;
    if (item.style.textDecoration == 'line-through') {
        item.style.textDecoration = 'none';
    } else {
        item.style.textDecoration = 'line-through';
    }
    window.localStorage.setItem(item);
}

//delete todo
function deleteTodo(e) {
    let item = e.target.parentNode;
    item.addEventListener('transitionend', function () {
        item.remove();
    });
    item.classList.add('todo-list-item-fall');
    window.localStorage.removeItem(item);
}

when you setItem you're adding a var name then value (localStorage.setItem("name", "value")), and if you want to remove the localStorage item, remove it by name (localStorage.removeItem("name")). — David Grosh
– David Grosh, Commented May 21, 2021 at 17:24
Should value still refer to list.innerHTML or should I be referencing the list item a different way? I still can't seem to get this to work. — jsdev
– jsdev, Commented May 21, 2021 at 20:54

0xdw · Accepted Answer · 2021-05-21 17:50:11Z

1

JavaScript Storage is a key-value pair. Just use a string-based key so you can remove, edit or read it easily.

// Set todo item
localStorage.setItem("todo1", "Stand-up meeting 9.15am");
// Read todo item
localStorage.getItem("todo1");
// Delete todo item
localStorage.removeItem("todo1");

It's better if you can save it as a JSON string because you can mark it as completed without delete, so you can find completed tasks too.

// Saving todo item as a JSON string
localStorage.setItem("todo1", JSON.stringify({ text: "Stand-up meeting 9.15am", completed: false }));

// Read it
const todo = JSON.parse(localStorage.getItem("todo1"));

// You can read the text
console.log(todo.text);
// Also you can mark it as completed and save it back
todo.completed = true;
localStorage.setItem("todo1", JSON.stringify(todo));

edited May 21, 2021 at 17:50

answered May 21, 2021 at 17:44

0xdw

3,8522 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jsdev Over a year ago

Would this mean assigning input.value and list.innerHTML both to a variable first and then referencing the variable name instead?

0xdw Over a year ago

@jsdev Yes, You can have a structure like {value: input.value, html: list.innerHTML }

Anup · Accepted Answer · 2021-05-21 17:26:43Z

0

Storing object in localStorage is a tricky job.

Everything you store in the local or session storage is of type string

you can create an object like

item = {
  value : ANY_VALUE
}

and save it in your localStorage using JSON.stringify

localStorage.setItem(`item`,JSON.stringify(item))

now when you want to update the item just update the object and again set using the ablove syntax

To access the saved item from the local storage use JSON.parse

yourItemObject = JSON.parse(localStorage.getItem())```

You can access values now using yourItemObject .value

answered May 21, 2021 at 17:26

Anup

6295 silver badges8 bronze badges

Comments

Med Amine Fh · Accepted Answer · 2021-05-21 17:33:16Z

0

It appears you're passing the whole HTML element (it passed as an object) inside the removeItem function. you need to pass the key instead.
try
localStorage.removeItem(item.innerText);

answered May 21, 2021 at 17:33

Med Amine Fh

12 bronze badges

1 Comment

jsdev Over a year ago

Thank you, I did try this but unfortunately it didn't work for me.

user15991907 · Accepted Answer · 2021-05-21 18:00:08Z

If you are working with lists in localStorage. I would use something like this basic example:

function addTodo(key, item){
      var list = getTodo(key);

      list.push(item);

      localStorage.setItem(key, JSON.stringify(list) );
}

function getTodo(key){

    try{
        var rawList = localStorage.getItem(key);
        return JSON.parse(rawList) || [];
    }
    catch(e){
        return [];
    }
}

function removeTodo(key, id){
  
  var list = getTodo(key);

  var newlist = list.filter( function(item){
      return item.id != id;
  });

  localStorage.setItem(key, JSON.stringify(newlist) )

}

function emptyTodo(key){
    localStorage.removeItem(key);    
}

addTodo('list', {
    id: 1,
    text: 'do shopping'
});

addTodo('list', {
    id: 2,
    text: 'study'
});

console.log( getTodo('list') );

removeTodo('list', 1);

console.log( getTodo('list') )

emptyTodo('list');

Collectives™ on Stack Overflow

Removing local storage item with vanilla javascript

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related