# 3. data-* - 透過 dataset 讀取自訂資料

### 什麼是 data-* ?

- data-*， *字號可以是任何的變數名稱：

例如： data-num , data-farmer 之類的。

data-* 通常是寫在 HTML Tag 上作為一個**標籤內的屬性**使用

ex:

    <ul class="list">
        <li data-num="1">0</li>
    </ul>

---

### 在 HTML 上綁定 data-* 屬性：

- 如何使用屬性資料？

    <ul class="list">
        <li data-num="1" data-dog="3" class="listli">
            卡特斯
        </li>
    </ul>

- 在 JavaScript 使用 `.dataset`:

console.log(document.querySelector('.list li').dataset);
// 透過指定 elements.dataset，會產生一個物件資訊，裡頭則會帶出你有兩個屬性


// DOMStringMap {num: '1', dog: '3'}
dog: "3"
num: "1"
[[Prototype]]: DOMStringMap

- 由 console 列出確實屬性上綁定的 dog:3 num:1 確實的撈出

---

### 為何需要 data-*? 原因是因為可以透過此方式做出資料綁定的行為

// dataset ＋ 'click' event 實際範例：


var el = document.querySelector('.list');


function checkData(e) {

    // e.target 點擊此範圍所有內容
    // e.target.dataset.*

    var num = e.target.dataset.num;
    var dog = e.target.dataset.dog;
    console.log('農夫編號:' + num + '農夫有:' + dog + '隻狗');
}


el.addEventListener('click', checkData, false);

###### tags: `JavaScript - localStorage`