Cookie
其实在最开始,cookie
是用来弥补HTTP
状态管理上的不足,因为HTTP
是无状态协议,当客户端向服务器发出请求时,服务器并无法知道对方是谁
所以就产生了cookie
,以key-value
的形式储存数据,在同一域名下发生请求,都会先携带cookie
再发送给服务器端,当服务器接收数据时对cookie
进行解析,就能获取到客户端的状态信息。
缺点:
cookie
存储空间只有4KB
,不够大- 每次请求都会携带全部
cookie
数据,如果携带了不必要的数据会造成性能浪费 - 容易被篡改数据,如果
httpOnly
为false
情况下,js
可以直接读取cookie
信息
localStorage
localStorage
也是通过key-value方式储存数据,数据只要不清空就不会消失,存储空间为5M
,同一个域名下面,数据是共享的
应用场景:可以用来储存一些网站,图片数据缓存下来
sessionStorage
sessionStorage
和localStorage
基本上一样,区别在于sessionStorage
是会话级别存储,当页面关闭之后,数据就自动清空了。
应用场景:可以用来储存当前页面中的表单数据,用户登录态
IndexDB
IndexDB
是运行在浏览器中的非关系型数据库, 容量是没有限制的
特性:
- 支付
事务处理
- 同源策略,每个数据库对应创建的域名,不能跨域访问
- 空间大,没有限制
- 支付二进制存储(
ArrayBuffer
对象和Blob
对象)
应用场景:
- 大屏可视化等大量数据的页面,缓存起来,减少服务器压力
- 聊天工具,将大量聊天信息缓存在本地
- 富文本内容草稿箱