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