iT邦幫忙

0

localStorage 用法

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用法詳解


尚未有邦友留言

立即登入留言