Frontend Mentor | iliwili's profile

@Zulfaabam

Submitted over 2 years ago

Anyone know how to save the task list to local storage? I try to save it and get it but when I got the item, it turned out to [object object]. pls help :)

Todo app built with vanilla JavaScript

iliwili• 225

@iliwili

Posted over 2 years ago

Hey, first of all, I really like how your solution looks and works.

For the localStorage problem you have. Your code at the moment doesn't let you do what you want because of your render method.

if (leadsFromLocalStorage) {
  todoLists = leadsFromLocalStorage;
  render(todoLists);
}

You pass down a list in your method render(lists), but you don't loop through the list in this render method. This method just appends one element in your list-container. That doesn't mean your render method is incorrect, it just means you need to tackle it in a different way.

const renderItem = (value, checked) => {}

if (leadsFromLocalStorage) {
  todoLists = leadsFromLocalStorage;
  todoLists.forEach((todo) => {
    render(todo.value, todo.checked);
  });
}

Change the render method to something like 'renderItem' and it should have 2 parameters: 'value' and 'checked', then assign the value and checked to the right HTML elements. After that you need to loop through the todoLists list and render each item as shown in the code above.

You change how the 'render' method functions, you get the list as a parameter and re-render the whole list every time something happens. So you clear the container-list div and re-render the whole list.

I personally would recommend the first way, because it is more efficient and you don't need to change too much functionality.

Hope this helps! :)

Marked as helpful

iliwili

All comments

Faq-Accordion-Card with HTML / CSS / JS

Todo app built with vanilla JavaScript