用文字记录生活,留下美好瞬间
原创

Cookie、SessionStorage与LocalStorage的差异

共 975 字,需阅读 2 分钟
2019/04/02 下午
738 次阅读

#Cookie

  • 存储位置:存储在用户的浏览器上。
  • 容量限制:单个Cookie的大小通常限制在4KB左右,且一个域名下的总Cookie数量也有限制。
  • 有效期:可以设置具体的过期时间,过期后自动删除;未设置时,通常会在浏览器会话结束时(即关闭浏览器)失效。
  • 安全性:相比其他两种存储方式,Cookie可以通过HTTPS传输增加安全性,但仍然容易受到XSS和CSRF攻击。
  • 跨域性:支持跨域设置,但需遵循同源策略,特定标志允许有限的跨域访问。

#SessionStorage

SessionStorage提供了一种临时的数据存储方式,专为单个浏览器会话设计。其特性包括:

  • 存储位置与容量:同样存储在客户端,一般提供至少5MB的存储空间。
  • 有效期:数据仅在当前浏览器窗口或标签页处于打开状态时有效,一旦关闭,数据就会被清除。
  • 安全性:由于数据不随HTTP请求发送,相对更安全,不易受XSS影响,但仍需注意同源策略。
  • 跨域性:不支持跨域访问,每个源(协议+域名+端口)拥有独立的SessionStorage。

#LocalStorage

LocalStorage为Web应用提供了长期的数据存储能力,适用于需要长期保存的信息。它的特点有:

  • 存储位置与容量:同SessionStorage,存储在客户端,空间较大,通常可达5MB以上。
  • 有效期:除非用户手动删除或通过JavaScript代码清除,否则数据会一直存在。
  • 安全性:面临与SessionStorage相似的安全问题,需防范XSS攻击。
  • 跨域性:同样遵循同源策略,不支持跨域。

#应用场景比较

  • Cookie:适合存储少量的、需要随请求发送至服务器的数据,如用户认证信息、偏好设置等。
  • SessionStorage:适用于存储单个会话中需要保留的信息,如临时购物车、表单填写进度等。
  • LocalStorage:适用于长期保存的用户数据,如用户设置、浏览历史记录等,不频繁更新且不涉及服务器交互的信息。
自由转载 - 署名 - 非商业性使用
https://zhangwurui.cn/article/44
0/0条看法
访客身份
在下有一拙见,不知...
期待你的捷足先登