cookie

  • 本身用于浏览器和 sever 通讯
  • 被“借用”到本地存储来
  • 可用 document.cookie='...' 来修改
document.cookie = 'a=100'  
console.log(document.cookie) // a=100  
  
document.cookie = 'b=200'  
console.log(document.cookie) // a=100; b=200  
  
document.cookie = 'a=300'  
console.log(document.cookie) // b=200; a=300
  • 缺点:存储大小,最大 4KB
  • http 请求时需要发送到服务器,增加请求数据量,在 Request Headers 会带上 Cookie: b=200; a=300
  • 只能用 document.cookie='...' 来修改,太过简陋

localStorage 和 sessionStorage

  • HTML5 专门为存储而设计,最大可存 5M
  • API 简单易用 setItem getItem
localStorage.setItem('a','100')
console.log(localStorage.getItem('a')) // 100
sessionStorage.setItem('b','200')
console.log(sessionStorage.getItem('b')) // 200
  • 不会随着 http 请求被发送出去
  • localStorage 数据会永久存储,除非代码或手动删除
  • sessionStorage 数据只会存于当前会话,浏览器关闭则清空
  • 一般用 localStorage会更多一些

cookie localStorage sessionStorage 区别

  • 最大容量,cookie:4KB,localStorage 和 sessionStorage:5M
  • API 易用性:cookie:只有 document.cookie 操作,localStorage 和 sessionStorage:有setItem getItem 等API
  • cookie 会随着 http 请求被发送出去,localStorage 和 sessionStorage 不会

标签: none

添加新评论