anjia / blog

博客,积累与沉淀
107 stars 4 forks source link

cookie, localStorage, sessionStorage #43

Open anjia opened 5 years ago

anjia commented 5 years ago

概况

相同点:

不同点:

  cookie localStorage sessionStorage
作用域 origin + path
当 path 是 '/' 时,则是 origin
origin origin + tab
失效期 一般由服务器生成,并设置失效时间;若在客户端设置,默认是浏览器关闭/max-age 持久型/主动删除 当前页签关闭
大小限制 每条 cookie 约 4KB / 个数限制 大约 5MB
HTTP 请求是否携带
安全 尽量加密 / HTTP only 若取, 注意XSS攻击
使用时 有库-封装 也可封, eg.方便存 JSON, Array 等

客户端存储时,别人都可随便修改 需注意安全方面。eg.加密、防止 XSS 攻击、防止恶意修改 当涉及敏感信息时,尤其注意。eg.钱、订单

大小限制,不同浏览器的实现会略不一样。 RFC 2965 的推荐标准:

cookie

cookie 的设计比较早,它作为 HTTP 协议的一种扩展,数据会自动在客户端和服务器之间传输。

所以,要在 cookie 里放数据时,尤其考虑此特性。以及安全性。

cookie 的限制:

sessionStorage

它和 localStorage 的唯一区别,就在于有效期。

localStorage

说说处理它时的注意事项:

这里有个 localStorage 的在线例子,可以感受下浏览器兼容性 https://mdn.github.io/dom-examples/web-storage/