Local Storage and Event Delegation 瀏覽器資料儲存和事件委派

Local Storage非常好用，可以把一些資料儲存在使用者的瀏覽器中，有需要時就可以取出。

Event Delegation事件委派，則在於可以利用Event Bubbling（事件冒泡）的特性，會一直傳遞事件到上層，所以可以減少我們監聽的數量。

此次練習成品：

就讓我慢慢自言自語，記錄一下～
個人codepen

技巧點

1. localStorage

• 允許你存取目前文件(Document)隸屬網域來源的Storage物件
• 除非使用者主動清除，否則會永久保留
• 能夠儲存的檔案大小大約5～10MB（根據不同瀏覽器不同，大小會不太一樣）

• 如果想查看到底有沒有成功存放在localStorage，就可以滑鼠右鍵點檢查開啟開發者工具．裡面有一個application(應用)，旁邊有一個storage就可以看到存放的資料．
• 網站可能在你操作的過程中，幫你存放資料在這裡，像是購物網站，你沒有登入會員的狀態下，將商品加入購物車，當你每一次進入網站時購物車都會顯示你上一次加入的清單，就可能是將資料存放在storage

2. Event Delegation

<ul>
  <li>123</li>
  <li>456</li>
  <li>789</li>
</ul>
// 上面為html結構，當我點擊到任何一個li的時候，會幫它加上一個active的class名稱

function activeItem(e) {
  e.target.classList.toggle("active");
}

const li = document.querySelectorAll("li");
li.forEach((item) => {
  item.addEventListener("click", activeItem);
})
// 取所有的li去做監聽

• 上面就很直觀的我要在li上面做監聽事件，所有的li都要綁定，但實際上可以利用事件委派，只要在li的父層ul綁定監聽事件就可以，如下：

ul.addEventListener("click", activeItem);

• 事件監聽addEventListener其實還有可帶入第三個參數，為布林值，預設為false，代表你要採用冒泡，那如果為true的話，代表你要用捕捉行為．差別的部分可以參考w3c的範例，非常清楚

3. join()

• 將陣列中的所有元素連接在一起，合併成一個字串並回傳

const students = ["jack", "marry", "tim"];

const list = students.join();
// 因為括號中沒有帶入任何參數，預設會是以逗號分隔，將所有元素合併

console.log(list); // jack,marry,tim

• 括號中可以代入你希望如何將所有元素合併，常見的有幾種方法，如下：

const students = ["jack", "marry", "tim"];

// 代入空字串，去連接
students.join(""); // jackmarrytim

//代入逗號加上空格
students.join(", "); // jack, marry, tim

// 代入指定的字串
students.join(" and "); // jack and marry and tim

• 在此次練習中，因為要處理動態的dom渲染，所以將local storage的陣列去做迴圈產生html的字串，最後必須將逗號消除掉，不然你就會在畫面上看到每一個項目下面多了一個逗號🤣

list.innerHTML = data.map((item, index) => {
    return `<li>
      <input type="checkbox" id="${index}" ${item.checked && "checked"}>
      <label for="${index}" data-id="${index}">${item.name}</label>
    </li>`;
  }).join("");

4. Element.matches(css選擇器)

• 去判斷元素是否有配對到對應的css選擇器，有的話回傳true

<ul>
  <li>
    <label for="123">123</label>
    <input type="checkbox" id="123">
  </li>
  <li>
    <label for="456">456</label>
    <input type="checkbox" id="456">
  </li>
</ul>

function activeItem(e) {
  const el = e.target;
  if (e.target.matches("input")) {
    el.checked ? el.parentNode.classList.add("active") : el.parentNode.classList.remove("active");
  }
}

const ul = document.querySelector("ul");
ul.addEventListener("click", activeItem);
// 上面的結構中，因為label跟checkbox有連動，你點的時候，會一次觸發兩個監聽事件，就可以利用matches去匹配目前觸發的元素是不是input，是的話，就根據他的checked的狀態，判斷要不要給li加上active

不太理解可以參考codepen

心得

一開始撰寫的時候，並沒有用到事件委派，而是迴圈綁定了很多監聽器，去處理check與否

雖然綁定很多監聽器，但相對也不需要去用matches去判斷哪一些子節點是我們要做處理的

從作者影片中又學到了不一樣的思考方式，讚讚