localStorage 用法

網頁程式 javascript

RocMark 2019-05-29 07:19:17 ‧ 8598 瀏覽

WebStorage / session / cookie 差異

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

WebStorage

更加安全 & 容量更大

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

缺點:

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

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

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言