Updated localStorage function to Es6 Class

Author: Dinesh1042

Notes App/script.js

@@ -8,8 +8,59 @@ let isEditingMode = false;
 let LOCALSTORAGE_NOTES_KEY = `Notes App`;
 let previousBackground = null;
 
+// LocalStorage
+
+class LocalStorage {
+  constructor(localStorageKey) {
+    this.localStorageKey = localStorageKey;
+    this.local = localStorage.getItem(this.localStorageKey)
+      ? JSON.parse(localStorage.getItem(this.localStorageKey))
+      : [];
+  }
+
+  save(newNote) {
+    this.local.push(newNote);
+    this.stringifyLocal();
+  }
+
+  delete(id) {
+    this.local = this.local.filter((item) => item.id !== id);
+    this.stringifyLocal();
+  }
+
+  update(id, title, text) {
+    this.local = this.local.map((item) => {
+      if (item.id === id) {
+        item.title = title;
+        item.text = text;
+      }
+      return item;
+    });
+    this.stringifyLocal();
+  }
+
+  updateIsStared(id, value) {
+    this.local = this.local.map((item) => {
+      if (item.id === id) {
+        item.isStared = value;
+      }
+      return item;
+    });
+    this.stringifyLocal();
+  }
+
+  stringifyLocal() {
+    return localStorage.setItem(
+      this.localStorageKey,
+      JSON.stringify(this.local)
+    );
+  }
+}
+
+const noteLocal = new LocalStorage("Notes App");
+
 addNoteEl.addEventListener("click", (e) => {
-  let noteCount = getLocal().length ? getLocal().length : ``;
+  let noteCount = noteLocal.local.length ? noteLocal.local.length : ``;
   getNotePad(`New note ${noteCount}`, null);
   bodyEl.classList.add("notePad__active");
 });
@@ -51,7 +102,7 @@ function createNoteDOM(data) {
     data.isStared
       ? noteEl.classList.add("stared")
       : noteEl.classList.remove("stared");
-    updateLocalIsStared(data.id, data.isStared);
+    noteLocal.updateIsStared(data.id, data.isStared);
   });
 
   // Text area cont
@@ -97,7 +148,7 @@ function createNoteDOM(data) {
 
   delBtn.addEventListener("click", (e) => {
     noteEl.remove();
-    deleteLocal(data.id);
+    noteLocal.delete(data.id);
   });
 }
 
@@ -199,14 +250,14 @@ function setNotesDOM(title, note, currentEditEl) {
       isStared: false,
     };
     createNoteDOM(newNote);
-    setLocal(newNote);
+    noteLocal.save(newNote);
   } else if (isEditingMode) {
     const id = currentEditEl.dataset.noteid;
     const titleEl = currentEditEl.querySelector("header .title h1");
     const noteEl = currentEditEl.querySelector(".textareaNote p");
     titleEl.innerHTML = title;
     noteEl.innerHTML = note;
-    updateLocalNotes(id, title, note);
+    noteLocal.update(id, title, note);
     isEditingMode = false;
   }
 }
@@ -237,59 +288,6 @@ function getCurrentDate() {
   return `${month}, ${todayDate} ${year}`;
 }
 
-// LOCAL STORAGE
-
-function getLocal() {
-  return localStorage.getItem(LOCALSTORAGE_NOTES_KEY)
-    ? JSON.parse(localStorage.getItem(LOCALSTORAGE_NOTES_KEY))
-    : [];
-}
-
-function setLocal(newNote) {
-  let local = getLocal();
-  local.push(newNote);
-  return localStorage.setItem(LOCALSTORAGE_NOTES_KEY, JSON.stringify(local));
-}
-
-(function SetNoteDate() {
-  let local = getLocal();
-  if (local.length) {
-    local.forEach((note) => {
-      createNoteDOM(note);
-      previousBackground = local[local.length - 1].backgroundColor;
-    });
-  }
-})();
-
-function updateLocalNotes(id, title, note) {
-  let local = getLocal();
-  local = local.map((item) => {
-    if (item.id === id) {
-      item.title = title;
-      item.text = note;
-    }
-    return item;
-  });
-  return localStorage.setItem(LOCALSTORAGE_NOTES_KEY, JSON.stringify(local));
-}
-
-function deleteLocal(id) {
-  let local = getLocal();
-  local = local.filter((item) => item.id !== id);
-  return localStorage.setItem(LOCALSTORAGE_NOTES_KEY, JSON.stringify(local));
-}
-
-function updateLocalIsStared(id, value) {
-  let local = getLocal();
-  local = local.map((item) => {
-    if (item.id === id) {
-      item.isStared = value;
-    }
-    return item;
-  });
-  return localStorage.setItem(LOCALSTORAGE_NOTES_KEY, JSON.stringify(local));
-}
-
 function getRandomBackground() {
   let backgroundColors = [
     `#b8dbd9`,
@@ -319,11 +317,20 @@ function searchNote(e) {
   notes.forEach((note) => {
     let noteTitle = note.querySelector("header .title h1");
     let notePara = note.querySelector(".textareaNote p");
-    let notePara2 = notePara.innerText;
     let regex = new RegExp(value, "gi");
     note.style.display = `none`;
     if (notePara.innerText.match(regex) || noteTitle.innerText.match(regex)) {
       note.style.display = `unset`;
     }
   });
 }
+
+(function () {
+  let local = noteLocal.local;
+  if (local.length) {
+    local.forEach((item) => {
+      createNoteDOM(item);
+    });
+    previousBackground = local[local.length - 1].backgroundColor;
+  }
+})();

Todo App/index.html

@@ -62,7 +62,7 @@ <h1>Hey, <span id="userName">Dinesh</span></h1>
             <img src="./Images/Logo.png" alt="logo" />
           </div>
           <div class="textContent">
-            <h1>Dinesh</h1>
+            <h1 id="statUserName">Dinesh</h1>
             <p>Todo App</p>
           </div>
         </div>

Todo App/script.js

@@ -10,16 +10,66 @@ const totalTaskEl = document.getElementById("totalTask");
 const CompletedTaskEl = document.getElementById("CompletedTask");
 const inCompletedTaskEl = document.getElementById("inCompletedTask");
 const userNameEl = document.getElementById("userName");
+const statUserNameEl = document.getElementById("statUserName");
 
 let isEditMode = false;
 let editEl = null;
 let TODO_LOCALSTORAGE_KEY = `Todo`;
 let userName = getUserName();
-
 userNameEl.innerHTML = userName;
 
 formEl.addEventListener("submit", addTodo);
 
+class LocalStorage {
+  constructor(localStorageKey) {
+    this.localStorageKey = localStorageKey;
+    this.local = localStorage.getItem(this.localStorageKey)
+      ? JSON.parse(localStorage.getItem(this.localStorageKey))
+      : [];
+  }
+
+  save(newData) {
+    this.local.push(newData);
+    this.stringifyLocal();
+  }
+
+  delete(id) {
+    this.local = this.local.filter((item) => item.id !== id);
+    this.stringifyLocal();
+  }
+
+  update(id, task, description) {
+    this.local = this.local.map((item) => {
+      if (item.id === id) {
+        item.task = task;
+        item.description = description;
+      }
+      return item;
+    });
+    this.stringifyLocal();
+  }
+
+  updateIsCompleted(id, value) {
+    this.local = this.local.map((item) => {
+      if (item.id === id) {
+        item.isCompleted = value;
+      }
+      return item;
+    });
+
+    this.stringifyLocal();
+  }
+
+  stringifyLocal() {
+    return localStorage.setItem(
+      this.localStorageKey,
+      JSON.stringify(this.local)
+    );
+  }
+}
+
+let todoLocal = new LocalStorage(TODO_LOCALSTORAGE_KEY);
+
 function addTodo(e) {
   e.preventDefault();
   let inputEl = this.querySelector("#userInput");
@@ -55,7 +105,7 @@ function createNewTodo(inputEl) {
     description: description,
   };
   createTodoEl(todoData);
-  addTodoToLocal(todoData);
+  todoLocal.save(todoData);
   inputEl.value = null;
 }
 
@@ -147,7 +197,7 @@ function createTodoEl(todo) {
 
   delBtn.addEventListener("click", (e) => {
     liEl.remove();
-    deleteLocal(liEl.dataset.id);
+    todoLocal.delete(liEl.dataset.id);
   });
 
   // Checkbox Event
@@ -167,7 +217,7 @@ function createTodoEl(todo) {
       checkEl.innerHTML = `<span class="material-icons"> done </span>`;
       isCompValue = true;
     }
-    updateIsCompletedLocal(liEl.dataset.id, isCompValue);
+    todoLocal.updateIsCompleted(liEl.dataset.id, isCompValue);
   });
 }
 
@@ -231,7 +281,7 @@ function editMyTodo(inputEl) {
   isEditMode = false;
   editEl = null;
   AddTodoBtnEl.innerHTML = `Add Todo`;
-  editLocalTodo(id, task, description);
+  todoLocal.update(id, task, description);
 }
 
 function updateEditView(liEl) {
@@ -251,53 +301,6 @@ function getTodoId() {
   return Math.floor(Math.random() * 10000000).toString(16);
 }
 
-function getLocal() {
-  return localStorage.getItem(TODO_LOCALSTORAGE_KEY)
-    ? JSON.parse(localStorage.getItem(TODO_LOCALSTORAGE_KEY))
-    : [];
-}
-
-function addTodoToLocal(newTodo) {
-  let local = getLocal();
-  local.push(newTodo);
-  return localStorage.setItem(TODO_LOCALSTORAGE_KEY, JSON.stringify(local));
-}
-
-function editLocalTodo(id, task, description) {
-  let local = getLocal();
-  local = local.map((item) => {
-    if (item.id === id) {
-      item.task = task;
-      item.description = description;
-    }
-    return item;
-  });
-  return localStorage.setItem(TODO_LOCALSTORAGE_KEY, JSON.stringify(local));
-}
-
-function deleteLocal(id) {
-  let local = getLocal();
-  local = local.filter((item) => item.id !== id);
-  return localStorage.setItem(TODO_LOCALSTORAGE_KEY, JSON.stringify(local));
-}
-
-function updateIsCompletedLocal(id, value) {
-  let local = getLocal();
-  local = local.map((item) => {
-    if (item.id === id) item.isCompleted = value;
-    return item;
-  });
-  return localStorage.setItem(TODO_LOCALSTORAGE_KEY, JSON.stringify(local));
-}
-
-(function upadateTodoList() {
-  listsEl.innerHTML = null;
-  let local = getLocal();
-  if (local.length) {
-    return local.forEach((todo) => createTodoEl(todo));
-  }
-})();
-
 // Button Ripple Effect
 
 ctaBtnsEl.forEach((button) => {
@@ -368,12 +371,13 @@ window.addEventListener("click", (e) => {
 });
 
 function showStats() {
-  let local = getLocal();
+  let local = todoLocal.local;
   let totalTaskLength = local.length;
   const completedTaskLength = local.filter((item) => item.isCompleted).length;
   const inCompletedTaskLength = totalTaskLength - completedTaskLength;
   const percentage =
-    Math.floor((completedTaskLength / totalTaskLength) * 100).toString() === `NaN`
+    Math.floor((completedTaskLength / totalTaskLength) * 100).toString() ===
+    `NaN`
       ? 0
       : Math.floor((completedTaskLength / totalTaskLength) * 100);
 
@@ -436,6 +440,7 @@ function NameModalInput() {
     if (inputEl.value.trim()) {
       userName = inputEl.value;
       userNameEl.innerHTML = userName;
+      statUserNameEl.innerHTML = userName;
       localStorage.setItem("userName", userName);
     }
     modalCont.remove();
@@ -458,7 +463,10 @@ function getUserName() {
 
 (function setUserName() {
   let user = localStorage.getItem("userName");
-  if (!user) {
-    return NameModalInput();
-  }
+  if (!user) return NameModalInput();
+})();
+
+(function () {
+  let local = todoLocal.local;
+  if (local.length) local.forEach((item) => createTodoEl(item));
 })();