知识点
- 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的“吨位”如果随意发,要是在手机上,还不得破产(T▽T))
localStorage 和 sessionStorage 的区别
- localStorage 数据会永久存储,除非代码或手动删除
- sessionStorage 数据只存在于当前会话,浏览器关闭则清空
- 一般用localStorage 会更多一些
cookie localStorage sessionStorage 的区别
- 都会在浏览器端保存,有大小限制,同源限制
cookie
会在请求时发送到服务器,作为会话标识,服务器可修改cookie
;web storage
(也就是localStorage和sessionStorage)不会发送到服务器cookie
有path
概念,子路径可以访问父路径cookie
,父路径不能访问子路径cookie
- 有效期:
cookie
在设置的有效期内有效,默认为浏览器关闭;sessionStorage
在窗口关闭前有效;localStorage
长期有效,直到用户删除; - 共享:
sessionStorage
不能共享,localStorage
在同源文档之间共享,cookie
在同源且符合path
规则的文档之间共享 localStorage
的修改会促发其他文档窗口的update
事件cookie
有secure
属性要求HTTPS
传输- 浏览器不能保存超过300个
cookie
,单个服务器不能超过20个,每个cookie
不能超过4k
。web storage
大小支持能达到5M
cookie,localStorage,sessionStorage对比表格:
特性 | Cookie | LocalStorage | sessionStorage |
---|---|---|---|
数据的申明周期 | 一般由服务器生成,可设置失效时间。如果在浏览器生成,默认是关闭浏览器之后失效 | 除非被清除,否则永久保存 | 仅在当前会话有效,关闭页面或浏览器后被清除 |
存放数据大小 | 4KB | 一般5MB | 一般5MB |
与服务端通信 | 每次都会携带在HTTP 头中,如果使用cookie 保存过多数据会带来性能问题 | 仅在客户端中保存,不参与和服务器的通信。 | 同LocalStorage |
用途 | 一般由服务器端生成,用于标识用户身份 | 用于浏览器缓存数据 | 同LocalStorage |
共享 | 在同源且符合path 规则的文档之间共享 | 在同源文档之间共享 | 不能共享 |
相同点 | 三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对 | 同上 | 同上 |
给个赞呗 (/ω\) !!! 前端知识体系 目录结构