今天主要學兩個東西。

1. localStorage
2. event delegation

• 功能
  • 做一個可以輸入文字的框，送出之後，新增到上面打勾的選項
  • 重新整理時，選單不會清空
• 畫面
  • 選單的選項前面，要有打勾的功能，並且自訂圖示。
    • 不打勾: 方塊
    • 打勾: 一塊"pork taco"

HTML DOM appendChild() Method 將node放入node的裡面(下一層)。

• preventDefault() Event Method 取消Event的預設行為
• Event.target 回傳「觸發了誰」

label.setAttribute('for', input.id);

form.reset();

localStorage比cookie更適合拿來做暫存的小空間。

• localStorage.setItem('key', 'value');
• localStorage.getItem('key');
• localStorage.removeItem('key');

另外還有sessionStorage

原本的寫法

let items = [];
if (JSON.parse(localStorage.getItem('items'))){
  items = JSON.parse(localStorage.getItem('items'));
}
populateList(items, itemsList); //update view

改成

const items = JSON.parse(localStorage.getItem('items')) || [];
populateList(items, itemsList); //update view

1. 為什麼不在label上面掛click的事件？
2. 最後加上去更新畫面的(Line 70: populateList(items, itemsList);)是否必要？