Localstorage for Todo list

Question

I want to have my items in my to do list not disappear when I reload the page using localstorage. What's the most simple way to do this?

I'm a beginner and would like to see an example how this would work. Thank you

Here's my code:

JAVASCRIPT:


const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");


document.addEventListener("DOMcontentloaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);


function addTodo(event) {
  event.preventDefault();
 
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");

  const newTodo = document.createElement("li");
  newTodo.innerText =todoInput.value;
  newTodo.classList.add("todo-item");
  todoDiv.appendChild(newTodo);

  saveLocalTodos(todoInput.value);

  const completedButton = document.createElement("button");
  completedButton.innerHTML ='<i class="fas fa-check"></i>';
  completedButton.classList.add("complete-btn");
  todoDiv.appendChild(completedButton);
  // Check trash button
  const trashButton = document.createElement("button");
  trashButton.innerHTML ='<i class="fas fa-trash"></i>';
  trashButton.classList.add("trash-btn");
  todoDiv.appendChild(trashButton);
  //Append to list
  todoList.appendChild(todoDiv);
  //Clear todo Inputvalue
  todoInput.value = "";
}

function deleteCheck(e){
    const item = e.target;
   
    if (item.classList[0] ==="trash-btn") {
     const todo = item.parentElement; 
  
     todo.classList.add("fall");
     todo.addEventListener("transitionend", function() {
        todo.remove();

     });
    }

   if (item.classList[0] === "complete-btn") {
    const todo = item.parentElement;
    todo.classList.toggle("completed");
   } 
}

It was something I tried earlier. I just forgot to delete it. — danceandchance, Nov 10 '22 at 19:43
Does this answer your question? [How to store objects in HTML5 localStorage/sessionStorage](https://stackoverflow.com/questions/2010892/how-to-store-objects-in-html5-localstorage-sessionstorage) — HackerFrosch, Nov 10 '22 at 19:59
Your question does not present **any** attempt in using localStorage at all. Please, read [ask], then [edit] your question with your best code you got after an [exhaustive research on the topic](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Then, [edit] with a [mcve]. — Roko C. Buljan, Nov 10 '22 at 20:06

score 0 · Answer 1 · answered Nov 10 '22 at 20:17

0

You can do this:

first, create this:

const toDoListStorage = localstorage.getItem("toDoList") ? 
JSON.parse(localstorage.getItem("toDoList")) : [];
if(toDoListStorage.length > 0) {
// do what ever you do to add new item to your todo list
}

Then for adding a new item to the storage :

toDoListStorage.push(newValue);
localstorage.setItem("toDoList", JSON.stringfy(toDoListStorage));

Then for deleting you should do this :

toDoListStorage.pop(deletedValue);
localstorage.setItem("toDoList", JSON.stringfy(toDoListStorage));

it should work now

answered Nov 10 '22 at 20:17

Farbod Shabani

422
4
9

Thanks a lot for helping! A stupid question because I followed a guide how to create this and wanted to add the localstorage part myself, can you give the exact name for getItem(".......") from the current code I have? I'm not sure how to connect it all together. – danceandchance Nov 10 '22 at 21:12
Instead of "toDoList" I mean because : Uncaught ReferenceError: localstorage is not defined – danceandchance Nov 10 '22 at 21:56
Maybe it because you have to write window.localstorage. usually you don't need to do that but maybe in your case you have to. The name is optional, you just need to use the same name for get Item and setItem – Farbod Shabani Nov 11 '22 at 03:19

Localstorage for Todo list

1 Answers1