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 Server对cookie的处理分析环节， 提高了Web Server的http请求的解析速度。

参考资料

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