今天內容

• local storage
• event delegation

筆記

• local storage

//HTML
<div class="app">
  <input class="text" type="text" /><button>儲存</button>
</div>

//script
document.querySelector("button").addEventListener("click", function(){
  const value = document.querySelector(".text").value
  window.localStorage.setItem(".text",value)
})

今天看的影片主要是講：如何在瀏覽器上儲存資料？但影片內容比較沒有操作上的教學，就是看一下維基百科就知道有這個東西，但使用上又是另一回事了。先知道有再來好好學，為了不讓 (發現今天太廢) 版面太難看，所以補一下昨天JS網頁事件處理漏掉的event delegation 來湊個版面

• event delegation 事件委託：用白話來說就是一群人去買麥當勞然後(委託)一個人去幫大家拿餐這樣就不用大家都去拿了，坐等吃。主要要先理解昨天提到的捕獲和冒泡，這樣就可以把事件監聽寫在父層，讓父層向下傳遞。就不用一個一個寫了。

//HTML
<div>
  <button class="add-btn">新增聯絡人</button>
</div>
<div class="container">
  <div class="row">
    <label>姓名：<input type="text" /></label>
    <label>電話：<input type="text" /></label>
    <button class="dele-btn">刪除</button>
  </div>
</div>

//javascript
document.querySelector(".add-btn").addEventListener("click",
  function() {
    const div = document.createElement("div")
    div.classList.add("row")
    div.innerHTML = `
    <label>姓名：<input type="text" /></label>
    <label>電話：<input type="text" /></label>
    <button class="dele-btn">刪除</button>
    `
    document.querySelector(".container").appendChild(div)
})
document.querySelector(".container").addEventListener("click",
  function(e) {
    if (e.target.classList.contains("dele-btn")) {
      document.querySelector(".container").removeChild(e.target.closest(".row"))
    }
})

這次呈現的畫面轉成GIF後 畫面太美我不敢看 ，就直接放codepan連結啦～

小結論

真的不是今天太廢，而是今天這一段實在是沒有講到什麼，我也很難寫。影片內容講得比較偏概念，看完感想是：恩 知道有這個東西，然後我就沒然後了QQ

Cookie講的內容跟維基百科簡介差不多，接著session storage和local storage類似，用法一樣只要把localStorage改成sessionStorage其他一樣setItem用法，差別在session storage新開一個分頁資料無法共用，MDN也沒講很多XD。所以今天是一個紀錄的筆記，完結！

參考資料

• Cookie 維基百科
• MDN localStorage
• MDN sessionStorage