Cookie, LocalStorage 与 SessionStorage异同

不同

  1. cookie由服务端生成,用于标识用户身份;而两个storage用于浏览器端缓存数据

  2. 一般情况下浏览器端不会修改 cookie,但会频繁操作两个storage

  3. cookie有path概念,子路径可以访问父路径 cookie,父路径不能访问子路径 cookie

  4. 有效期: cookie在设置的有效期内有效,默认为浏览器关闭;sessionStorage在窗口关闭前有效,localStorage长期有效,直到用户删除

  5. 浏览器不能保存超过300个 cookie,单个服务器不能超过20个,每个 cookie不能超过4k。web storage大小支持能达到5M

  6. 共享:sessionStorage不能共享,localStorage在同源文档之间共享, cookie在同源且符合path规则的文档之间共享

  7. 如果保存了 cookie的话,http请求中一定会带上;而两个storage可以由脚本选择性的提交

  8. 安全性方面, cookie中最好不要放置任何明文的东西。两个storage的数据提交后在服务端一定要校验

相同

  1. 三者都是键值对的集合

  2. 都会在浏览器端保存,有大小限制,同源限制

扩展阅读

HTML5本地存储——IndexedDB(一:基本使用)

cookie隔离
即优化方案中提到的静态资源放在不带cookie的域名下的解决方案
如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量, 所以不如隔离开。 因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据, 这样可以降低请求头的大小,降低请求时间,从而达到降低整体请求延时的目的。 同时这种方式不会将cookie传入Web Server,也减少了Web Servercookie的处理分析环节, 提高了Web Server的http请求的解析速度。

参考资料

详说 Cookie, LocalStorage 与 SessionStorage
为什么很多网站的静态资源会使用独立的域名?

阅读 2.1k

推荐阅读

前端学习路上的笔记和总结

21 人关注
48 篇文章
专栏主页