cookie sessionStorage localStorage

共同点：都是浏览器储存数据的方法

Web Storage: sessionStorage localStorage

时效性：

• cookie:
  • 通过Expires 或 Max-Age设置过期时间
  • 设置有效时间内有效，如果不设置有效时间，默认当前会话有效，关闭即失效;
• sessionStorage:
  • 当前会话有效，关闭页面失效；
• localStorage:
  • 一直存储在浏览器，除非手动删除；

作用域

• cookie:
  • domain（域名） 和 path（路径）定义，可跨子域共享（需显示配置）
    • www.example.com/articles/20…
    • www.example.com 是域名
    • /articles/2023/01 是路径
• sessionStorage:
  • 标签页隔离，同个浏览器，打开一样的两个标签页面，页面之间数据会隔离，不相互影响；
• localStorage:
  • 同源（协议，域名，端口全部一致）标签页数据可以共享

大小：

• cookie：
  • 4kb，且每个域名下最多允许50个cookie;
• Web Storage:
  • 5~10M

服务器交换：

• cookie:
  • 每次http请求自动通过请求头cookie携带，数据过多会影响性能
• Web Storage:
  • 数据仅储存于客户端，不发送到服务端

安全性：

• cookie:
  • 支持Secure(仅HTTPS传输)/httpOnly(禁止JS访问)等属性，但易受到CSRF攻击；
• Web Storage:
  • 数据可以用过JS直接访问获取，存在XSS攻击风险，敏感信息需要加密存储；

应用场景：

• cookie:
  • 会话管理/用户身份验证；
• sessionStorage:
  • 临时数据存储；
• localStorage:
  • 长期储存用户偏好设置；

其他特性：

• 事件监听:
  • localStorage修改会触发storage事件，其他窗口可监听；
  • cookie需要轮训检测变化；
• 兼容性：
  • cookie全浏览器支持；
  • Web Storage IE8+和现代浏览器；