浏览器储存

当前浏览器数据储存方式主要有:

• cookies
• webStorage
  • sessionStorage
  • localStorage
• indexedDB

  需要注意的是,它们都受同源策略限制,不能跨域访问

Cookies

cookies的出现,并不是为了浏览器储存,而是为记录http状态,因为http是无状态协议;也就是服务器不知道用户上次做了什么,服务器可以通过设置,读取cookies,了解用户行为,每次请求都会带cookies,从而维护用户和服务器的状态.

cookies的设置

• js中,通过document.cookies设置或读取
• 服务端,通过http协议的set-cookies在浏览器种下cookies,之后每次请求都会自动带cookies信息

服务端操作cookies很常见,一般用来保存用户密码,用来自动登录

cookies还有一些其他属性能够设置,保证其实用性,安全性

• Domain：Cookies是同源策略，这个是当前Cookies生效的域名
  Path：表示Cookies影响的路径，匹配到这个路径才发送这个Cookies
• Expires/Max-Age：Expires告诉浏览器Cookies什么时候过期，Max-Age是相对过期时间，不设置这两个时间，默认用户关闭浏览器就被清除
• HttpOnly：当这个值为True的时候，表示浏览器不能通过document.cookie更改Cookies的值，可以避免被xss攻击更改Cookies的值
• Secure：当这个值为True的时候，Cookies在HTTP中无效，在HTTPS中才有效
• SameSite：规定浏览器不能在跨域请求中携带Cookies，减少CSRF攻击

不设置过期时间时,数据不会保存在硬盘,而是内存,属会话周期,关闭页面清除;设置过期时间则会保存到硬盘,直到过期自动清除.

同源窗口可跨tab共享

cookies缺点

• 大小限制4k,超过将自动切断
• 储存形式键值对,值只能是字符串,对象不会自动序列化
• 每次请求都带,带宽浪费

webStorage

sessionStorage和localStorage异同点:
同:

• 储存大小5m左右
• 能以键值对形式,值只能是字符串,对象会自动序列化
• 同源限制
• 只用在客户端,不与服务端通信
• 支持事务通知,数据更新能通知监听者（storage事件）
• api方便

异:

• session会话周期,关闭tab即清除;local始终有效,需手动清除
• session不能跨tab使用,local可以

IndexedDB

IndexedDB是一种低级API，用于客户端存储大量结构化数据（包括文件和blobs）。该API使用索引实现高性能数据搜索，它是一个运行在浏览器上的非关系型数据库，它的大小是没有存储上限的。

IndexedDB有以下特点：

• 键值对存储
• IndexedDB操作是异步的，不会造成浏览器卡死
• 支持事务
• 遵循同源策略
• 存储空间大，一般不少于250MB，没有上限
• 支持二进制存储

总结