Todo List with JavaScript and make remain on browser even after you refresh

Question

I built a Todolist with JavaScript its working fine but I want my Todo-items to remain on the browser even if I refresh till I delete it. What can I do?

Answer 1

There are 2 ways to go about this

1. The common approach - get a backend service up and running, then store it in a database so that it can be fetched anytime from any device.

2. The browser only approach - If you are looking for a simple enough approach, you may use the localStorage API and implement localStorage.setItem(), localStorage.getItem() and localStorage.removeItem() methods to save your todos locally on the users machine. Do note that this data can be cleared by the user.

To know more about when localStorage is cleared, refer this When is localStorage cleared?

Answer 2

This solution uses LocalStorage to persist data across browser reloads.

Refer to in-code comments for guidance, particularly about tracking the state of your data in JavaScript, and syncing that state with both the UI and the persistent (stored) data.

Limitations:

• The "ToDo" items in this demo have only a single property, a 'description'.
• The UI only allows adding items (by typing a description and tabbing or clicking out of the input).
• The code runs correctly in Chrome, although NOT in the Stack Overflow snippet due to sandboxing.

    <h3>Todo</h3>
    <input id="newitem" />
    <div id="list"></div>
    
    <script>
    // Names HTML elements, calls `makeAndAddNewItem` when input changes
    const
      newItemInput = document.getElementById("newitem"),
      listDiv = document.getElementById("list");
    newItemInput.addEventListener("change", makeAndAddNewItem);
    
    // `tempList` is an array containing all our list items, 
    // serving as the Source of Truth for the state of our data.
    // When it changes, we should update the page and the stored list
    //
    // On page load, we retrieve data from storage and update the page
    const tempList = getListFromStorage();
    showListOnPage(tempList);
    
    function getListFromStorage(){ // Called on page load
      // Gets the storedList (if any), converts it to an array
      //   and returns the array (or returns an empty array)
      const storedList = localStorage.getItem("list");
      const list = storedList ? JSON.parse(storedList) : [];
      return list;
    }
    
    function showListOnPage(tempList){ // Called on page load
      // Loops through the tempList array and adds each item to the page
      for(let currentItem of tempList){
        showItemOnPage(currentItem);
      }  
    }
    
    function showItemOnPage(item){ // Used on load and for new items
      // Appends to the listDiv a new `p` element, whose content
      // is the value of the `description` property of the item
      let
        descriptionNode = document.createTextNode(item.description),
        newParagraph = document.createElement("p");
      newParagraph.appendChild(descriptionNode);
      listDiv.appendChild(newParagraph);
    }
    
    function makeAndAddNewItem(event){ // eventListener for new items
      // Makes a `newItem` object whose `description` property
      //   comes from the value of the `newItemInput` element
      // Adds the new item to the page and to the tempList
      // Replaces the stored list, using the newly changed tempList
      const newItem = {};
      newItem.description = newItemInput.value;
      newItemInput.value = ""; // Clears input
    
      tempList.push(newItem);  // Updates list
      showItemOnPage(newItem); // Updates page
      updateLocalStorage(tempList); // Updates storage
    }
    
    function updateLocalStorage(){ // Called when tempList changes
      // Converts tempList (array) to a string to update localStorage.list
      const listToStore = JSON.stringify(tempList);
      localStorage.setItem("list", listToStore);
    }
    </script>