這堂課比平常稍微長了一些，大約三十分鐘，課程中提到了許多觀念與細節，是許多人在開發中也常遇到的問題，而老師用了比較快速或是周全的方式來解決這些問題。有空沒事的同學可以來聽聽。

今天的實作範例如下

在輸入框輸入文字後enter或點+Add Item可以加入項目，而點選項目可以勾選或取消勾選。最重要的是，加入後的清單「重新整理後不會消失」！糾竟是怎麼做到的呢？讓我們繼續看下去...

邏輯流程

1. 取得列表、輸入框等element
2. 監聽輸入框submit
3. 將輸入框內容包成物件放入Array
4. 將內容包成HTML字串放入列表
5. 監聽列表click
6. 用localStorage的setItem和getItem來實現資料的存取

課程重點

1. e.preventDefault()：避免submit時候reload page
2. localStorage.setItem()：本實作的重點之一，可以將字串儲存在瀏覽器的儲存空間。若要從chrome來看，在開發人員工具→Application頁籤→Storage項目中的Local Storage→file://，就可以看到你存的[key,value]。setItem()參數要放自訂的item名稱，也就是key，以及item內容，實作中將內容包成JSON格式
3. localStorage.getItem()：取得儲存在Local Storage的內容，參數是你在setItem時候的key值

延伸閱讀

• this.reset()：練習中用reset讓輸入框在輸入完後清空內容
• 用map()方式來做HTML字串

  latesList.innerHTML = plates.map((plate, i) => {
     return `
         <li>
           <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
           <label for="item${i}">${plate.text}</label>
         </li>
     `;
  ).join('');
  ``
  

• 監聽勾選事件是監聽整個<ul>的click，而不是個別<li>。因為若監聽<li>，後來新增的<li>就不會被監聽。