# 【JS30】Day15 - LocalStorage and Event Delegation
###### tags: `LocalStorage`、`Event Delegation`、`querySelector與[ ]`、`reset()`、`客制化 Checkbox`
影片範例中，輸入資料、案button後重整，資料卻還在。這是因為資料有被放入LocalStorage的關係。

## LocalStorage
首先，做功能的第1步驟，設定好DOM。

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

下方程式碼中的第三行比較特別。localStorage雖然看起來很像物件（因為裡面的key-value），但localStorage本身存資料的格式是字串。
所以要項目（items）要透過JSON.parse()，把localStorage的資料字串轉成物件。但有可能沒資料，所以會寫```|| []```，若無資料就將items設空陣列。

 const addItems = document.querySelector('.add-items');
 const itemsList = document.querySelector('.plates');
 const items = JSON.parse(localStorage.getItem('items')) || [];

DOM處理好後，開始定義函式。
處理過程：先把資料存進items陣列裡（這樣會比較好放），再把items陣列資料存到localStorage跟納入html的畫面裡。

addItems.addEventListener('submit', addItem); //按下按鈕，執行addItem函式

    function addItem(e) {
    e.preventDefault(); //submit原本會讓頁面reload，preventDefault()可以失去此功能
    const text = (this.querySelector('[name=item]')).value;
    const item = {
      text, //原本是text:text，這是ES6縮寫的寫法
      done: false
    };

    items.push(item); //items沒有資料時是空陣列
    this.reset(); //input欄位重置
    
    //以下是把資料放進html畫面裡的函式
    function populateList(plates = [], platesList) { 
//plates = []是指參數若沒傳東西進來，預設是空陣列
    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('');
  }
  
populateList(items, itemsList);
  
localStorage.setItem('items', JSON.stringify(items)); //資料存進localStorage
  }

先單獨把資料放進html畫面裡的函式，拉出來討論：

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('');
  }
  
populateList(items, itemsList);

上方程式碼中，給予每個資料data-index跟id，之後會很方便處理，好比說要刪除，就可以針對點到哪一個data-index進行刪除。

加上```'checked'```，會怎麼樣呢？radio或是checkbox，加上```'checked'```，就會變成選取樣式。
<br>

## Event Delegation 
好，到這邊感覺差不多了！
等等，輸入內容後，點擊checkbox，重整頁面，原本checkbox點選的狀態呢？消失了～
前面也只把items陣列的內容推到localStorage跟放到html畫面上而已，所以重整後，checkbox已經沒有checked，點選的狀態就會消失。

點選清單時我們可以切換資料狀態，一般都是根據DOM，去綁定事件：

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

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

為了讓頁面上點選的狀態持續存在。要進行以下步驟：

function toggleDone(e) {
if (!e.target.matches('input')) return; // skip this unless it's an input
//match也可以寫成is
const el = e.target;
const index = el.dataset.index;
items[index].done = !items[index].done;
localStorage.setItem('items', JSON.stringify(items));
populateList(items, itemsList);
}

itemsList.addEventListener('click', toggleDone);

//寫完後，記得要更新localStorage跟html畫面
populateList(items, itemsList);
localStorage.setItem('items', JSON.stringify(items));

針對 element 除了我們可以使用 ```element.querySelector<'selectorString'>``` 來選擇元素外，我們也可以使用 ```element.matches(<'selectorString'>)``` 這個方法。



<br>

## querySelector與[ ]
上方程式碼中，出現這個範例。

const text = (this.querySelector('[name=item]')).value;

<br>

## .push()
函式中出現```items.push(item);```，但item是物件，items是陣列，.push()也是陣列的方法。物件可以推到陣列中嗎？答案是可以的。
<br>

## LocalStorage的setItem、getItem、removeItem
可以把LocalStorage想像成裡面是雙欄位的表格，欄位分別是key、value，分別都是填入字串。想像setItem就是設定表單內容。

好比說，報名活動要輸入名字、電話。把LocalStorage當成報名表。可以設定成：

同理，getItem就是取得表單內容。

取得表單內欄位的內容。好比說：

想要刪掉資料，可以用```localStorage.removeItem(keyName);```
<br>

## .reset()
使用者填完資料後，輸入，通常input欄位的內容會消失（方便馬上填新資料進去）。
要讓input欄位的內容消失，通常會用```.reset()```。

<br>

## 客制化 Checkbox
影片中間有提到，關於客制化Checkbox的小技巧，先把這裡的checkbox先把它```display:none```，讓它消失在畫面上。再利用 pseudoElement的方式添加假的checkbox。

這招我有用在"[評價星號](https://codepen.io/OneTeam/pen/XBrWOG)"的功能上。
我讓checkbox的content變成星號，滑過、點下去，會變深黑色。常見於簡單的評價功能。

.plates input + label:before {
content: '⬜️';
margin-right: 10px;
}

.plates input:checked + label:before {
content: '🌮';
}

<br>