CODEWITHSUNDEEP
javascriptlocal-storage
Ryland Oehlers
Ryland Oehlers

Reputation: 13

Having trouble with ToDo List App with saving to localStorage

Super new to all of this so this might be some beginner troubleshooting. The list seems to be working where I'm adding a list element to the UL with a checkbox and delete button. When checkbox is checked it puts a line through the text and when the delete button is clicked it deletes the list element. The assignment asks to save to localStorage so that when refreshed, the list items still remain, and I'm getting super confused by this. What I have now seems to be saving my list elements to an array but I don't understand how to get them to save and stay on the page.

const form = document.querySelector('form');
const input = document.querySelector('#todoInput');
const newElement = document.querySelector('ul');

const savedToDos = JSON.parse(localStorage.getItem('todos')) || [];

newElement.addEventListener('click', function(e) {
    if(e.target.tagName === 'BUTTON') {
        e.target.parentElement.remove()
    }
})

function addToList(text) {
    const li = document.createElement('li');
    const checkbox = document.createElement('input');
    const button = document.createElement('button');
    button.innerText = "Delete";
    checkbox.type = 'checkbox';
    checkbox.addEventListener('change', function() {
        li.style.textDecoration = checkbox.checked ? 'line-through' : 'none';
    })
    li.innerText = text;
    li.insertBefore(checkbox, li.firstChild);
    li.appendChild(button);

    
    return li;
};

form.addEventListener('submit', function(e) {
    e.preventDefault();
    const newListItem = addToList(input.value);
    input.value = '';
    newElement.append(newListItem);
    savedToDos.push(newListItem.innerText);
    localStorage.setItem('todos', JSON.stringify(savedToDos));
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo App</title>
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <div>
        <h1>Todo List</h1>
        <form action="">
            <input type="text" id="todoInput" placeholder="Add To Todo List">
             <button class="add-button">Add</button>
        </form>
        <ul id="todoList">
        </ul>
    </div>
    <script src="app.js"></script>
    
</body>
</html>

Upvotes: 0

Views: 265

Answers (2)

kmoser
kmoser

Reputation: 9273

It looks like you're failing to populate the DOM when the page loads.

After you retrieve the items from local storage (which you're already doing), loop through the list and add each of them to the DOM:

// After this line, which you've already written:
const savedToDos = JSON.parse(localStorage.getItem('todos')) || [];

// Loop through savedToDos, and for each one, insert a new list:
savedToDos.forEach(function(value) {
    const newListItem = addToList(value);
    newElement.append(newListItem);
});

Upvotes: 1

Naeem
Naeem

Reputation: 183

Every browser has local storage where we can store data and cookies. just go to the developer tools by pressing F12, then go to the Application tab. In the Storage section expand Local Storage.

this piece of code might help you

    // Store Task
function storeTaskInLocalStorage(task) {
  let tasks;
  if(localStorage.getItem('tasks') === null){
    tasks = [];
  } else {
    tasks = JSON.parse(localStorage.getItem('tasks'));
  }

  tasks.push(task);

  localStorage.setItem('tasks', JSON.stringify(tasks));
}

Upvotes: 0

Related Questions