Added LocalStorage feature & Reload Functionality

Author: VertikaJain

todo-list-crud/app.js

@@ -19,30 +19,10 @@ form.addEventListener("submit", (event) => {
     const id = new Date().getTime().toString(); // to get unique value for id, date() can be used.
     if (toDoValue) {
         if (!editFlag) { // to add item to the list dynamically
-            let element = document.createElement("article"); // creating new article to add to list
-            element.classList.add("grocery-item"); // add class
-            const attribute = document.createAttribute("data-id"); // creating attribute 
-            attribute.value = id;
-            element.setAttributeNode(attribute); // set that attribute for the created element
-            element.innerHTML = `<p class="title">${toDoValue}</p>
-            <div class="btn-container">
-              <button type="button" class="edit-btn">
-                <i class="fas fa-edit"></i>
-              </button>
-              <button type="button" class="delete-btn">
-                <i class="fas fa-trash"></i>
-              </button>
-            </div>`;
-            list.appendChild(element); // add whole element to the toDo list
+            createListItems(id, toDoValue);
             container.classList.add("show-container"); // since visibility is false
+            addToLocalStorage(id, toDoValue); // CRUD
             setAlert("Item/Task added to the list.", "success");
-            // edit and delete button elements
-            const editBtn = element.querySelector(".edit-btn");
-            editBtn.addEventListener("click", editItem);
-            const deleteBtn = element.querySelector(".delete-btn");
-            deleteBtn.addEventListener("click", deleteItem);
-            // CRUD
-            addToLocalStorage(id, toDoValue);
             setToDefault();
         }
         else { // to edit items in the list
@@ -67,7 +47,18 @@ clearBtn.addEventListener("click", () => {
     container.classList.remove("show-container");
     setAlert("Items have been removed from the list.", "danger");
     setToDefault(); // for edit functionality
-    // localStorage.removeItem("list");
+    localStorage.removeItem("list"); // removes all items from local storage
+});
+
+// on page load / reload
+window.addEventListener("DOMContentLoaded", () => {
+    let data = localStorage.getItem("list") ? JSON.parse(localStorage.getItem("list")) : [];
+    if (data.length > 0) {
+        for (item of data) {
+            createListItems(item.id, item.value);
+        }
+        container.classList.add("show-container");
+    }
 });
 
 // ****** FUNCTIONS **********
@@ -107,24 +98,73 @@ deleteItem = (event) => {
 
 // ****** LOCAL STORAGE **********
 addToLocalStorage = (id, value) => {
-    // console.log("add to local storage", id);
+    const toDo = { id, value };
+    // if localStorage is empty, create empty array, otherwise assign existing data to array
+    let data = localStorage.getItem("list") ? JSON.parse(localStorage.getItem("list")) : [];
+    data.push(toDo);
+    localStorage.setItem("list", JSON.stringify(data));
 }
 removeFromLocalStorage = (id) => {
-    // console.log("removeFromLocalStorage", id);
+    let data = localStorage.getItem("list") ? JSON.parse(localStorage.getItem("list")) : [];
+    data = data.filter(d => d.id !== id); // filtering data that has to be removed.
+    localStorage.setItem("list", JSON.stringify(data)); // keeping rest of the data in local storage
 }
 editLocalStorage = (id, value) => {
-    // console.log("edited local storage", id);
+    let data = localStorage.getItem("list") ? JSON.parse(localStorage.getItem("list")) : [];
+    // map() method can be used to edit the specific value w.r.t. id
+    data = data.map(d => {
+        if (d.id === id) {
+            d.value = value;
+        }
+        return d;
+    });
+    localStorage.setItem("list", JSON.stringify(data));
 }
-// ****** SETUP ITEMS **********
-
 
+// ****** SETUP ITEMS **********
+createListItems = (id, toDoValue) => {
+    let element = document.createElement("article"); // creating new article to add to list
+    element.classList.add("grocery-item"); // add class
+    const attribute = document.createAttribute("data-id"); // creating attribute 
+    attribute.value = id;
+    element.setAttributeNode(attribute); // set that attribute for the created element
+    element.innerHTML = `<p class="title">${toDoValue}</p>
+    <div class="btn-container">
+      <button type="button" class="edit-btn">
+        <i class="fas fa-edit"></i>
+      </button>
+      <button type="button" class="delete-btn">
+        <i class="fas fa-trash"></i>
+      </button>
+    </div>`;
+    list.appendChild(element); // add whole element to the toDo list
+    // edit and delete button elements
+    const editBtn = element.querySelector(".edit-btn");
+    editBtn.addEventListener("click", editItem);
+    const deleteBtn = element.querySelector(".delete-btn");
+    deleteBtn.addEventListener("click", deleteItem);
+}
 
 /*
     Learnings:
     1. changing content and classlist dynamically
-    2. setTimeOut() method
-    3. createElement, createAttribute, setAttributeNode
-    4. appendChild(), removeChild()
-    5. children property of array
-    6. previousElementSibling
+    2. setTimeOut() method calls a function or evaluates an expression after a specified number of milliseconds.
+
+    ----- DOM ELEMENTS -----
+    3. createElement() method creates an Element Node with the specified name.
+    4. createAttribute() method creates an attribute with the specified name, and returns the attribute as an Attr object.
+    5. setAttributeNode() method adds the specified attribute node to an element.
+    6. appendChild() method appends a node as the last child of a node
+    7. removeChild() method removes a specified child node of the specified element.
+    8. children property returns a collection of an element's child elements, as an HTMLCollection object.
+    9. previousElementSibling property returns the previous element of the specified element, in the same tree level.
+
+    ----- LOCAL STORAGE -----
+    10. The localStorage property allows to save key/value pairs in a web browser.
+    11. localStorage.setItem() method is used to Add key and value to local storage,
+    12. localStorage.getItem() method is used to Retrieve a value by the key from local storage,
+    13. localStorage.removeItem() method is used to Remove an item by key from local storage.
+
+    14. JSON.stringify() method used is to convert a data array to a string since json takes strings only
+    15. JSON.parse() method is used to to convert the content back into an object
 */