论cookie、sessionStorage、localStorage和session的区别

93 阅读2分钟
可以从存储位置,生命周期,作用域,存储大小,是否自动发送服务器,主要用途方便去解答它们的区别

详细说明:

1.cookie
  • 存储位置:是服务器发送用户浏览器并保存在本地的一小段数据,浏览器会存储cookie并下次想同一服务器再发送请求时携带上并发送到服务器上的。一般它用于告诉服务端两个请求是否来自同一浏览器,蔽日保存用户的登录状态,可通过过document.cookie访问,HTTP 协议是无状态的,可用于稳定记录状态信息成为可能。
  • 生命周期:默认在浏览器关闭实效(会话cookie);可设置expires和max-age实现持久化存储
  • 作用域:遵循同源策略,可设domain和path共享给子域名
  • 容量:约4kb,每个域名最多约50个cookie
  • 自动发送:每次http请求会携带cookie
  • 安全性:需要设置httpOnly防止XSS攻击,设置secure仅通过https传输
  • 应用场景:用户登录状态,个性化设置,跟踪用户行为等
2.sessionStorage
  • 存储位置: 浏览器的临时存储
  • 生命周期:关闭标签页或者窗口后数据清除
  • 作用域:同源同一个标签页,不同标签页不可共享
  • 容量:约5mb
  • 应用场景:临时保存表单的数据,页面跳转时的临时状态
3.localStorage
  • 存储位置: 浏览器持久化存储,除非手动清除
  • 生命周期:数据永久保存,需通过代码,浏览器设置或清除缓存删除
  • 作用域: 同源跨标签页和窗口共享
  • 容量:约5mb
  • 应用场景:保存用户偏好(主题,语言等),缓存静态资源
4.session
  • 存储位置:数据存储在服务器内存,数据库或者缓存
  • 生命周期:默认用户关闭浏览器或者会话超时后失效,可通过服务器配置延长有效期
  • 安全性:敏感数据不暴露在客户端
  • 应用场景: 用户登录状态,购物车信息,权限控制等