To Do List

前言

• 此次專案主要分為四大功能 : 新增物品、編輯物品、刪除物品與清空list。
• 這次文章先建立基本變數與方法

Local Storage

• 在HTML5中，有加入了一個LocalStorage特性，此功能就類似Cookie，能夠儲存資訊於Client端。而與SessionStorage的唯一區別就在於，LocalStorage屬於永久性儲存，而SessionStorage屬於當會話結束的時候，其中的鍵值會被清空。

JavaScript重點

1. 基本變數設置

   • 利用class="grocery-form"抓取整個Form

   const form = document.querySelector(".grocery-form");
   

   • 利用class="alert"抓取警告訊息<p>元素

   const alert = document.querySelector(".alert");
   

   • 利用id="grocery"抓取輸入方格

   const grocery = document.getElementById("grocery");
   

   • 利用class="submit-btn"抓取提交按鈕

   const submitBtn = document.querySelector(".submit-btn");
   

   • 利用class="grocery-container"抓取list區域

   const container = document.querySelector(".grocery-container");
   

   • 利用class="grocery-list"抓取包含所有項目的<div>元素

   const list = document.querySelector(".grocery-list");
   

   • 利用class="clear-btn"抓取清空list按鈕

   const clearBtn = document.querySelector(".clear-btn");
   

2. LocalStorage方法建立 :

   我們在LocalStorage中，有個名為"list"的JSON物件，其中用{"id" : "xxxxxx", "value" : "xxxx"}的方式來儲存資料

   • 獲得JSON物件至LocalStorage中

   function getLocalStorage() {
   
       //將list的內容提取出來(temp的型態為String)
       let temp = localStorage.getItem("list");
   
       //如果list物件中有東西    
       if(temp){
   
           //則回傳傳換為物件型態的temp，並蒐集所有物件進一個陣列
           return JSON.parse(temp);
       }else{
           return [];
       };
   };
   

   • localStorage.getItem : 可以取得LocalStorage中的內容
   • JSON.parse(JSON字串) : 可以將JSON字串轉化為JavaScript的物件，並將所有物件皆放入一個陣列中

   • 新增一筆JSON物件至LocalStorage中

   function addToLocalStorage(id, value) {
   
       //新增一筆JS物件
       const grocery = { id, value };
   
       //取得目前LocalStorage的所有物件，並存入陣列item中
       let items = getLocalStorage(); 
   
       //將物件塞入陣列
       items.push(grocery);
   
       //將items轉回字串型態，並塞回list中
       localStorage.setItem("list", JSON.stringify(items));
   };
   

   • items.push() : 可以添加一或多個元素至陣列的末端
   • localStorage.setItem() : 將資料暫存的內容重新刷新一次

   • 從LocalStorage裡移除一筆物品

   //輸入欲刪除物品的id
   function removeFromLocalStorage(id) {
   
       //取得目前LocalStorage的所有物件，並存入陣列item
       let items = getLocalStorage();
   
       //利用Array.filter去篩選該物件以外的其他物件
       items = items.filter(function (item) {
           if (item.id !== id) {
               return item;
           };
       });
   
       //將items轉回字串型態，並塞回list中
       localStorage.setItem("list", JSON.stringify(items));
   };
   

   • Array.filter() : 會回傳一個篩選過後的陣列，很適合用在搜尋符合條件的資料

   • 編輯LocalStorage中的一筆物品

   //根據id和value去搜尋想要的物品
   function editLocalStorage(id, value) {
   
       //取得目前LocalStorage的所有物件，並存入陣列item
       let items = getLocalStorage();
   
       //利用Array.map()找出想要的物品，並更改其value
       items = items.map(function (item) {
           if (item.id === id) {
               item.value = value;
           };
           return item;
       });
   
       //最後把items轉回字串型態，並塞回list中
       localStorage.setItem("list", JSON.stringify(items));
   };
   

   • Array.map() : 需要回傳一個值，他會透過函式內所回傳的值組合成一個陣列。
     • 如果不回傳則是undefined
     • 回傳數量等於原始陣列的長度

引用與參考來源

1. localStorage簡介
2. JSON stringify and parse
3. Array.push()
4. Array.filter()
5. Array.map()