localStorage 作業

Chun

·

Follow

4 min read

·

Jul 2, 2020

--

Share

目標：

1. input 輸入內容，按下 加入代辦 btn，隨即印在網頁上，並可新增多筆。
2. 清單項目旁邊有 刪除 btn 可刪除清單項目。
3. 資料同步儲存在 localStorage 裡。

選擇 dom 節點

1. 送出的按鈕
2. UL 清單
3. input 輸入欄位

宣告一組空的陣列 [ ]，用來裝資料

1. 宣告空陣列
2. 宣告從 Local Storage 取出的資料（此時為字串格式）
3. 空陣列 = 轉型成陣列格式的 Local Storage 資料
4. 用 || (或是)，當陣列裡面沒有資料時，才不會出錯。

綁定 click 事件監聽

1. 送出新增清單 LI
2. 刪除清單 LI

新增清單的 click 事件監聽 function

1. prevenDefault() 取消默認行為
2. 用 .value 抓取 input 輸入欄位的文字內容
3. 把輸入進去的內容，給定成物件格式，{ 屬性: 值}，因為陣列裡面包物件，屬性名可自訂，屬性的值＝ input 輸入欄位的內容。
4. 中間加上 if 判斷式，當輸入欄位沒有填寫時，return 中止後面的程式，不印在網頁上。
5. 用 push 的方式，將資料一筆一筆推入。推入前面宣告的空陣列裡。
6. （更新資料 for 迴圈字串加總、渲染到網頁(Html)上、將資料(轉型字串化)存到 localStorage），以上三個動作獨立成一個 function 函式，因為回重複用到(刪除清單時)，每次新增或刪除清單都需要重新跑 for 迴圈、重新渲染網頁、重新變更 localStorage 的資料。最後記得要在外層呼叫function，才會執行動作！

更新資料 function

1. 要給參數，用來把前面宣告的陣列給代進來。
2. for 迴圈字串加總，先在外層給空值，利用組字串方式，將字串：<li>、<a>刪除、data-num、變數 i 及陣列裡的屬性值(也就是 input 輸入欄位的內容)一併代入。
3. 在迴圈外，用 innerHTML 將加總完的字串，渲染在網頁上。
4. 將陣列資料轉形成字串化，再儲存到 localStorage 裡。

刪除清單的 click 事件監聽 function

1. 監聽綁在父層 UL 上
2. 利用 e.target.dataset.num 當前指向的編號來讀取資料
3. 加入 if 判斷式，如果當前指向的節點名(nodeName)不是’A’(刪除)，則 return 停止下面的動作。
4. 符合條件(點選到'A')，刪除陣列裡的資料。splice(刪除的位置, 刪除幾筆資料)
5. 最後，再執行一次更新資料的 function，將資料重新渲染網頁。