cookie localStorage sessionStorage

知识点

• cookie
• sessionStorage localStorage

cookie

• 本身用于浏览器和server通讯
• 被 “借用” 到本地存储
• 可用 document.cookie = '...' 来修改

注意： 下面的控制台演示，需要开启本地服务器（如：nodejs的http-server）。如果直接本地打开浏览器页面，是设置不了cookie的

根据上图显示的规律：document.cookie 它里面存储键值对。
同一个key，它“覆盖”；不同key,它“追加”；

兄嘚！有没有掉坑里¯_(ツ)_/¯

登录功能就经常用cookie实现：会在Request Headers 里把 cookie 发送给服务端

另外，cookie 能做本地存储，这就不用说了吧，因为刷新后，cookie里面的内容还是在的（cookie是在html5规范出来并普及之前唯一能做本地存储的家伙）

注意： cookie 当初的设计并不是为了做本地存储，而是为了浏览器和服务端的通讯。 只是被借用来做本地存储

cookie 的缺点

• 存储大小：最大4KB
  上头讲了，它妈造它是为了浏览器和服务端的通讯，不是为了存东西的。
  

• http 请求时需要发送到服务端，增加请求数据量
  这就是个粘人精啊！！！ 不管发什么请求，都要带上它。
  (肥)膘少还好说，否则
  http请求(它妈) 缓缓拖走。。。

• 只能用 document.cookie = '...' 来修改，太过简陋
  花样太少，技术不行，诶，费解。。。
  

头胎（cookie），没经验，给养废了，
没事儿，再生两个。。。
localStorage 和 sessionStorage (双胞胎) 出生了 ヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉ

localStorage 和 sessionStorage

• HTML5 专门为存储而设计，最大可存5M (够大！ 比cookie的4KB 大多了)
• API 简单易用 setItem getItem
• 不会随着 http 请求被发送出去 （5M的“吨位”如果随意发，要是在手机上，还不得破产(Ｔ▽Ｔ)）
  

localStorage 和 sessionStorage 的区别

• localStorage 数据会永久存储，除非代码或手动删除
• sessionStorage 数据只存在于当前会话，浏览器关闭则清空
• 一般用localStorage 会更多一些
  

cookie localStorage sessionStorage 的区别

1. 都会在浏览器端保存，有大小限制，同源限制
2. cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage（也就是localStorage和sessionStorage）不会发送到服务器
3. cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
4. 有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效；localStorage长期有效，直到用户删除；
5. 共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
6. localStorage的修改会促发其他文档窗口的update事件
7. cookie有secure属性要求HTTPS传输
8. 浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M

cookie,localStorage,sessionStorage对比表格：

特性	Cookie	LocalStorage	sessionStorage
数据的申明周期	一般由服务器生成，可设置失效时间。如果在浏览器生成，默认是关闭浏览器之后失效	除非被清除，否则永久保存	仅在当前会话有效，关闭页面或浏览器后被清除
存放数据大小	4KB	一般5MB	一般5MB
与服务端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端中保存，不参与和服务器的通信。	同LocalStorage
用途	一般由服务器端生成，用于标识用户身份	用于浏览器缓存数据	同LocalStorage
共享	在同源且符合path规则的文档之间共享	在同源文档之间共享	不能共享
相同点	三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对	同上	同上