# [JavaScript] LocalStorage瀏覽器資料儲存
###### tags: `JavaScript`

> 前言：時常用於“我的最愛”功能列，一般我們所點選的資料都會藉由傳入後端資料庫儲存，如要取用也須從資料庫取出，無形中會增加資料庫的負荷，要節省儲存庫的容量以及載入速度，建議使用localStorage、cookie、sessionStorage的方式在瀏覽器儲存。


localStorage語法範例
* 存入方法：setItem("key位置",宣告)
* 取得方法：getItem('key位置')

---

匯入流程
* 先定義btn與html的ID位置，代入監聽公式，再建立function事件寫入匯入的公式（同上）


取得流程
* 如匯入流程，先定義call(下圖無顯示)，再使用監聽呼叫取得公式。


## 透過json來轉譯資料

只能使用string字串存入資料，因此需要使用json將array陣列轉為字串才可存入，而取得資料則須將記憶體的資料轉譯成array陣列。

從localstorage取出來的值都是字串
-陣列轉字串：JSON.stringify()
-字串轉陣列 & JSON格式：JSON.parse()



* 匯入公式的關鍵在countryString加入json.stringify語法，過濾country所得出的陣列資料，而匯入公式setItem再將轉意後的資料匯入就可以順利儲存。

* 取得的方式也與匯入方式相同

## dataset讀取自訂資料

html語法：針對list再自訂特定物件，data-命名 ="值"
js語法：
指定在list li的位置，匯出方式是寫上e.target.dataset.num名稱，便可以得到在html所設定的資料，也是e.target.value之外的另一種語法

## dataset及array的應用

目的：分別將各個li做陣列區分[0][1]，並選擇ul做事件反應，針對點擊ul採用return空白值，只有點擊li才會執行動作

本輪學到東西
1. 設定呼叫編號
2. 點到li項目才會動作

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.nodeName;
  if(e.target.nodeName !== 'LI'){return};
  var str = e.target.dataset.num;
  alert('你選擇的農夫是'+country[str].farmer)
}
list.addEventListener('click',checkList,false);

* 設定呼叫編號 data-num，可供之後利用編號做新增及刪除的功用。

for(var i = 0;len>i;i++){
    str+='<li data-num="'+i+'">'+country[i].farmer+'</li>'
  }

* 此處的num變數，是用來偵測節點nodeName，與if判斷式搭配如果不是LI便回傳空值(無反應)，主要是判定在點擊時只有點到li才會有行動，若非li便回傳空值
* str變數是呼叫前面所定義的編號num

### 點擊後刪除array

* 語法splice(num,1) => 刪掉編號第num筆位置，寫(1)則是刪除一個資料，如果寫2就是刪除向下兩筆資料。
* 刪除後方接一個updateList()再宣告，會傳至function內，到list.innerHTML呈現畫面，畫面上的狀態才會即時更新。

//更新農場資料
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};
  country.splice(num,1);
  updateList();
}
list.addEventListener('click',checkList,false);

 // 指定 dom
  var list = document.querySelector('.list');
  var sendData = document.querySelector('.send');
  var data = JSON.parse(localStorage.getItem('listData')) || [];

  // 監聽與更新
  sendData.addEventListener('click', addData);
  list.addEventListener('click', toggleDone);
  updateList(data);

  //加入列表，並同步更新網頁與 localstorage
  function addData(e) {
    e.preventDefault();
    var txt = document.querySelector('.text').value;
    var todo = {
      content: txt
    };
    data.push(todo);
    updateList(data);
    localStorage.setItem('listData', JSON.stringify(data));
  }
  // 更新網頁內容
  function updateList(items) {
    str = '';
    var len = items.length;
    for (var i = 0; len > i; i++) {
      str += '<li><a href="#" data-index=' + i + ' />刪除</a> <span>' + items[i].content + '</span></li>';
    }
    list.innerHTML = str;
  }
  // 刪除代辦事項
  function toggleDone(e) {
    e.preventDefault();
    if(e.target.nodeName !== 'A'){return};
    var index = e.target.dataset.index;
    data.splice(index, 1);
    localStorage.setItem('listData', JSON.stringify(data));
    updateList(data);
  }