[JS30] Day15: LocalStorage and Event Delegation

keywords: `客制化checkbox`, `event delegation`, `custom checkbox`, `localStorage`

HTML 部分

蠻單純的，扣掉一張 SVG 圖片的話，結構大概長這樣：

<div class="wrapper">
  <h2>LOCAL TAPAS</h2>
  <p></p>
  <ul class="plates">
    <li>Loading Tapas...</li>
  </ul>
  <form class="add-items">
    <input type="text" name="item" placeholder="Item Name" required />
    <input type="submit" value="+ Add Item" />
  </form>
</div>

CSS 部分

客制化 Checkbox

這裡有一個蠻有趣的技巧，可以讓我們自訂 checkbox 樣式：

/**
 * 客制化 checkbox
 * 這裡的 checkbox 先把它 display:none
 * 再利用 pseudoElement 的方式添加假的 checkbox
**/
input[type='checkbox'] {
  display: none;
}
input[type='checkbox'] + label:before {
  content: '⬜️';
  margin-right: 10px;
}
input[type='checkbox']:checked + label:before {
  content: '🌮';
}

自訂 checkbox @ PJCHENder CodePen

JS 部分

先選取我們之後會用到的元素

const addItems = document.querySelector('.add-items');
const itemLists = document.querySelector('.plates');

使用 `<form>` HTMLFormElement

因為 JS 再操作 DOM 的時候很方便，因此有些時候沒有真的要把表單送出（submit）的話，就都沒有把 <input> 外面在包一層 <form>。但是使用 <form> 包住有幾個好處，一個是我們在監聽的時候可以監聽 submit 事件。更重要的是 HTMLFormElement 提供了我們 reset() 這個方法，讓我們可以一次把表單的內容全部清空。

但是使用 <form> 的話要記得把 button 的 type 設成 submit （<button type="submit"> ）；另外，要記得在按鈕點擊時要 preventDefault() ，否則會真的把表單送出（<form> 沒有設定location 的話變成重新整理）。

另外，通常一個 form 裡面只會有一個 submit button ，如果你有多個 button 要做不同功能的話，form + submit 的方式或許就不適合。

HTMLFormElement @ MDN

/**
 * STEP1: 添加 item 項目
 * 這裡監聽的是 submit 事件，好處是當使用者按 enter 也會觸發
 **/

addItems.addEventListener('submit', addItem);
function addItem(e) {
  e.preventDefault(); // 使用 preventDefault 避免真的 submit
  let text = document.querySelector('[name="item"]').value;
  let item = {
    text,
    done: false,
  };
  plateItems.push(item);

  /**
   * HTMLFormElement 可以使用 reset() 方法來清空表單
   **/
  e.target.reset();
}

使用 localStorage

如果沒有資料庫，又想要保存資料（本地端），那麼使用 localStorage 會是個好幫手，localStorage 的使用相當簡單，唯一要注意的是，如果不小心把瀏覽器的快取清空，那麼這些儲存的內容也會一併消失。

localStorage 儲存資料的時候就是簡單的 key: value paired，但要注意的是 value 只能是字串，所以如果你是要存物件到 localStorage 的話，記得要先把物件 JSON.stringify()，讓物件變成 JSON 字串的格式儲存起來。

當要取出資料的時候，再透過 JSON.parse()把原本的 JSON 字串轉換成 JS 物件。

以下是 localStorage 的 API：

localStorage.setItem('<keyName>', '<value>'); // 儲存到 localStorage
localStorage.getItem('<keyName>'); // 取得 localStorage 內容
localStorage.removeItem('<keyName>'); // 移除 localStorage 項目

Using the Web Storage API @ MDN

如果想要檢視 localStorage 的內容，可以打開 Chrome Dev Tool 選擇 Application 欄位就可以看到了。

warning

localStorage 的使用相當簡單，唯一要注意的是，如果不小心把瀏覽器的快取清空，那麼這些儲存的內容也會一併消失

產生 HTML 清單

我們用一個 function 來把陣列當中的內容轉成 HTML Element。這裡要留意的是 HTML 的 checkbox 中有一個 checked 屬性，當這個屬性存在時，這個 checkbox 就會被勾選，即使設成 checked=false 也一樣。

<!--  只有出現 checked attribute 則 checkbox 都會被勾選  -->
<input type="checkbox" checked />
<input type="checkbox" checked="false" />
<!-- 一樣會勾選 -->

/**
 * STEP2: 根據 plateItems 產生 HTML Element
 * 在 checkbox 中只要給 checked 都會是勾選狀態，寫 checked="false" 無用
 **/
function populateHTMLList(plateItems, targetElement) {
  targetElement.innerHTML = plateItems
    .map((item, i) => {
      return `
            <li>
                <input type="checkbox" id="item${i}" data-index="${i}" ${
        item.done ? 'checked' : ''
      }>
                <label for="item${i}">${item.text}</label>
            </li>
        `;
    })
    .join('');
}

只要有 checked 屬性都會讓 checkbox 被勾選 <input type="checkbox" checked="false">

Event Delegation 和 Element.matches()

最後在點選清單時我們可以切換資料狀態，傳統的作法上，我們會根據 DOM 把元素綁定事件，像是這樣：

const lists = document.querySelectorAll('.plates li');
lists.forEach((list) => {
  list.addEventListener('click', clickHandler);
});

但這麼做會有一個問題，當我們新增 list 時，這個新增的 list 就不會被綁定到事件，因此這裡我們要使用 event delegation 的作法，我們要監聽 ul 的 click 事件，因為當 ul 裡面的 li 被點擊時一樣會觸發這個這個 click 事件，然後我們可以透過 e.target 來篩選和判斷被點擊的元素是誰。

另外針對 element 除了我們可以使用 element.querySelector<'selectorString'> 來選擇元素外，我們也可以使用 element.matches(<'selectorString'>) 這個方法，來看看根據這個 selectorString 能不能選擇到該元素，結果會回傳 Boolean：

/**
 * STEP4: 監聽 list 的點擊事件，當被點擊時切換 checked 狀態並存到資料庫中
 **/
itemLists.addEventListener('click', toggleDone);
function toggleDone(e) {
  if (!e.target.matches('input')) return;
  let index = e.target.dataset.index;
  plateItems[index].done = !plateItems[index].done;
  localStorage.setItem('plateItems', JSON.stringify(plateItems));
  // populateHTMLList(plateItems, itemLists)
}

完成作品

Day15: LocalStorage and Event Delegation @ PJCHENder CodePen

keywords: 客制化checkbox, event delegation, custom checkbox, localStorage​

HTML 部分​

CSS 部分​

客制化 Checkbox​

JS 部分​

使用 <form> HTMLFormElement​

使用 localStorage​

產生 HTML 清單​

Event Delegation 和 Element.matches()​

完成作品​

參考資料​