WES BOS系列影片
Alex快速導讀系列影片

今天要來認識
LocalStorage
看不太懂的話，這裡也有一篇我覺得寫得很好理解的筆記可以參考
localStorage 的使用

藉由練習todolist的新增，來理解LocalStorage的用法
作者在最一開始提供了三個變數，個別代表
送出、儲存、顯示

const addItems = document.querySelector('.add-items');//要送出的表單資料
const items = [];//儲存送出的表單資料
const itemsList = document.querySelector('.plates');//要顯示資料內容的區塊

我的想法是先從看得到的渲染畫面開始做，
1.先做一個渲染畫面的函式populateList
platesList => 要顯示資料內容的區塊(itemsList)
plates => 儲存送出的表單資料(items)
取得items資料後，利用map()遍歷資料，並寫成HTML

function populateList(plates = [],platesList) {
    platesList.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('');
  

return回來的HTML還是存在陣列中，大概會長這樣

["<li>...</li>","<li>...</li>","<li>...</li>"]

我們需要從陣列中取出，所以使用join('')，轉成字串的同時，也將逗點去除

<li>...</li> 
<li>...</li> 
<li>...</li>

寫完這段函式，就可知道，我們需要將甚麼資料寫入LocalStorage中
plate.text與 plate.done
也就是，items中每一個item，需要寫入
text:需完成事項
done:是否完成

2.監聽表單送出的動作、撰寫addItem函式

function addItem(e) {
    e.preventDefault()
    console.log(e)
}

addItems.addEventListener('submit',addItem)

'submit'，預設會轉到新分頁，
所以首先要e.preventDefault()，阻止預設的行為
console.log(e)，可以確定監聽器是否正確執行

確定可正確執行後，可以開始製作儲存資料的動作

  function addItem(e) {
    e.preventDefault()
    // console.log(e)
    const text = (this.querySelector('[name=item]')).value
    const item = {
      text,
      done: false
    };
    items.push(item)
    
    populateList(items,itemsList)
  }

如果功能只寫到這，頁面刷新後，
剛才輸入的資料都不會被記錄，而是全部都被reset
明天我們就可以利用LocalStorage的功能，
來解決這個問題。