學會了 localStorage 跟 data-* 屬性後，今天就可以結合這兩者試著寫一個 to-do list 囉！

先貼個成品的程式碼連結。

HTML 部分

首先，to-do list 是讓使用者輸入待辦事項用的，因此輸入欄是很關鍵的區塊。

• input text - 輸入待辦事項的文字欄
• input button - 送出按鈕
• 沒寫 li 的 ul - 沒寫 li 的原因是要讓 JS 動態新增項目進去

JS 部分

能讓 to-do list 運作起來當然是靠 JavaScript，基本架構跟邏輯如下：

1. 選取 DOM

• input button
• ul
• 宣告一個變數 dataBase：目的是取出存在 localStorage 裡的資料並轉為陣列型別，如果瀏覽器裡沒存資料則跑空值
  ★ 補充說明：|| [ ] 代表 || 前面的程式碼如果沒執行，就跑空值。

2. 監聽及更新
   在綁定事件監聽的區塊，處理的有加入、刪除、將存在瀏覽器裡的資料渲染置網頁等功能。
3. 將待辦事項寫入資料庫，並同步更新網頁與 localstorage
   這個區塊是「加入待辦事項」的函式。
4. 把存在 localStorage 裡的資料渲染至網頁
   這個區塊也是函式，具有把存在瀏覽器的資料加入至網頁上的功能，在整個程式碼裡反覆出現（第 2、第 3、第 5 步）。
5. 刪除待辦事項，更新網頁跟 localstorage
   這個區塊是「刪除已寫入的項目」的函式。