CODEWITHSUNDEEP
javascriptlocal-storage
jsdev
jsdev

Reputation: 33

Removing local storage item with vanilla javascript

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

Upvotes: 1

Views: 1369

Answers (4)

user15991907
user15991907

Reputation:

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');

Upvotes: 0

0xdw
0xdw

Reputation: 3842

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

Upvotes: 1

Med Amine Fh
Med Amine Fh

Reputation: 1

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

Upvotes: 0

Anup
Anup

Reputation: 629

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

Upvotes: 0

Related Questions