透過HTML中的 web storage 物件， 可以將網頁中的資料儲存在使用者的瀏覽器當中

1. window.sessionStorage：放在sessionStorage的資料會在頁面(頁籤)關閉時清空，只要該頁面頁面(頁籤)沒被關閉或者有還原(restore)該頁面，資料就會保存。
2. window.localStorage： 放在localStorage的資料會永久保存，直到被使用者清除。

web storage method

1. Storage.setItem('key', 'value')：
   透過在setItem()方法中指定物件屬性的key以及value，
   我們可以在storage物件中加入屬性或修改原本的屬性內容。

2. Storage.getItem('key')：
   透過在getItem()方法中輸入屬性的key，我們可以得到storage物件對應的屬性value。

3. Storage.key()：
   透過在key()方法中輸入屬性的順序位置，我們可以取得storage物件中該位置的屬性key，此順序位置如陣列一樣，由0開始。

4. Storage.removeItem()：
   透過在removeItem()方法，我們可以把指定的屬性從storage物件中移除。

5. Storage.clear()：
   透過clear()方法，我們可以直接把storage中的所有屬性移除

setItem/getItem應用

var country = [
    {farmer:'卡斯伯'}
];
var countryString= JSON.stringify(country);
localStorage.setItem('countryItem',countryString);

var getData = localStorage.getItem('countryItem');
var getDataAry = JSON.parse(getData);

console.log(getDataAry[0].farmer);

dataset讀取自訂資料

list.addEventListener('click',checkList,false);
// //確認點擊的農夫是誰
function checkList(e){
  var num=e.target.dataset.num;
  var dog=e.target.dataset.dog;
  console.log('農場主人'+num);
  console.log('農場的狗'+dog);
}
html
    <ul class="list">
        <li data-num="0" data-dog="3">卡斯伯</li>
    </ul>

dataset array應用

var country = [
  {
    farmer:'卡斯伯'
  }
  ,{
    farmer:'查理'
  }
]
var list = document.querySelector('.list');

//更新農場資料
function updateList(){
  var str = '';
  var len = country.length;
  for(var i = 0;len>i;i++){
    str+='<li data-num="'+i+'">'+country[i].farmer+'</li>'
  }
  list.innerHTML = str;
}
updateList();

//確認點擊的農夫是誰
function checkList(e){
  var num = e.target.dataset.num;
  console.log(e.target.nodeName);
  if(e.target.nodeName !== 'LI'){return};
  alert('你選擇的農夫是'+country[num].farmer)
}
list.addEventListener('click',checkList,false);

splice刪除

 country.splice(num,1);
 第幾筆/要del一個還是兩個