跳到主要内容

Cookie & sessionStorage & localStorage

Cookie sessionStorage localStorage 都是页面存储相关的东西，了解了一下

特点​

  1. 大小 4k
  2. cookie 一般是由服务器生成，有过期时间
  3. 没有过期时间默认关闭浏览器清除
  4. 参与通信，一般放在 http 请求头部
// 读取cookie
const allCookie = document.cookie
// 设置cookie
document.cookie = cookieString

cookieString 说明:

  • 格式: "key=value;path=path;domain=domain;max-age=max-age-in-seconds;expires=date-in-GMTString-format;secure"
  • path: (例如 '/', '/mydir') 如果没有定义，默认为当前文档位置的路径。
  • domain: (例如 'example.com'， 'subdomain.example.com') 如果没有定义，默认为当前文档位置的路径的域名部分。与早期规范相反的是，在域名前面加 . 符将会被忽视，因为浏览器也许会拒绝设置这样的 cookie。如果指定了一个域，那么子域也包含在内。
  • max-age=max-age-in-seconds (例如一年为 60*60*24*365)
  • expires=date-in-GMTString-format 如果没有定义，cookie 会在对话结束时过期 这个值的格式参见 Date.toUTCString()
  • secure (cookie 只通过 https 协议传输)

以上内容摘自MDN-Document.cookie

sessionStorage​

特点​

  1. 大小在 5M 左右，不同的浏览器大小不一样
  2. 仅在当前会话有效，关闭页面或浏览器会被清除

Window.sessionStorage​

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value')

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key')

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key')

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear()

localStorage​

特点​

  1. 大小 5M
  2. 不会自动清除，要手动清除

Window.localStorage​

// 设置数据
localStorage.setItem('key', 'value')
// 获取数据
let data = localStorage.getItem('key')
// 移除数据
localStorage.removeItem('key')
// 移除所有数据
localStorage.clear()