WebStorage / session / cookie 差異

session 關閉視窗即失效
cookie 關閉視窗會將資料保存，但容量較小(4KB)

WebStorage

更加安全 & 容量更大

1. localStorage 關閉視窗會將資料保存，
   直到主動去清空，ChromeDevTools可做修改
2. sessionStorage 頁面關閉清空

缺點:

1. 各瀏覽器容量大小不一，IE8+才支援
2. localStorage 儲存值為 string，JSON 需轉換處理
3. 無法被爬蟲抓取
4. 內容過多會消號記憶體空間，導致卡頓
5. 瀏覽器下的隱私模式，無法使用 (待驗證)

ChromeDevTools

localStorage資料位於Application Tab中
Storage / LocalStorage

增刪改查

  // 檢查Browser是否支援 LocalStorage
  if(typeof(Storage) !=="undefined") 
  
  // 新增單項，存入的資料皆會被轉成字串
  localStorage.setItem('testData', 'Hey!')

  // 取得單項，取得值為字串
  localStorage.getItem('testData')
  // 因此要讀取JSON資料做使用，因先轉換
  let jsonData = JSON.parse(localStorage.getItem('testData'))

  // 移除單項
  localStorage.removeItem('testData')
  localStorage.getItem('testData') // null

  // 清空所有 localStorage
  localStorage.clear()

  // 類似陣列查詢，輸入Index回傳該位置的鍵值
  localStorage.key(0)

參考資料

本地儲存localStorage用法詳解