06-浏览器存储

浏览器存储

Cookie

服务端保存在浏览器的一小段文本信息，一般大小不能超过4k，每次请求和响应时，都会在报头增加这段附加信息，导致流量增加，所以一般只有哪些每次请求都需要让服务器知道的信息才会放在Cookie中

请求头以Cookie字段将所有的键值对信息以分号分隔发送，所以服务端口无法知道Cookie的各种属性

响应头以Set-Cookie字段创建或修改键值对信息，一个Set-Cookie只能设置一个键值对，若想设置多个就需要写多个Set-Cookie

谷歌浏览器出于安全考虑，本地file协议无法操作cookie和AJAX请求

Cookie属性

属性名	描述
Expires/Max-Age	Expires是UTC时间格式过期日期（以客户端为准，HTTP１.０的字段），Max-Age是以秒为单位的存活时间（相对时间，HTTP１.１的字段），两者共存以Max-Age为准，若都未指定则默认当前Session有效，即关闭浏览器窗口失效
Domain	指定哪些域名要附带这个Cookie，默认是当前请求域名且子域名不会附带，若指定了.baidu.com这样前面有点时，则子域名才会附带；若服务器指定的的域名不属于当前域名，则浏览器拒绝接受这个Cookie
Path	指定哪些路径下附带这个Cookie，默认是当前请求的路径且子路径会附带，若当前请求路径不是以/结尾，也就是说不是一目录而是一个文件，也会以当前目录为Path的值
Secure	浏览器只有在HTTPS下才会将这个Cookie发送给服务器，若当前协议是HTTP，浏览器会忽略服务器设置的Secure属性，该属性只是一个开关，没有属性值，在HTTPS协议下会自动打开
HttpOnly	指定该Cookie无法使用前端JS拿到，只有浏览器发送HTTP请求时才会附带
SameSite	Chrome51开始浏览器增加的一个属性用来限制向第三方（跨域请求时发送请求域的Cookie，而并非当前域的Cookie）发送Cookie，可以有效的限制CSRF攻击；属性值有：Strict严格的，只有当前URL与请求目标一致才会带上Cookie；Lax稍稍放宽的，只有Get表单、a标签连接和link标签的预加载不会要求URL与请求目标一致；None：就是未设置，跨域时会有警告

客户端的Cookie操作

• Navigator.cookieEnabled：判断用户是否打开Cookie功能
• Document.cookie：获取或设置Cookie
  • 获取Cookie：该属性以字符串的形式返回所有Cookie（设置HTTPOnly属性的除外），每组键值对都以分号分隔，不会显示Cookie元数据
  • 设置Cookie：不像其他的属性，赋值不是覆盖而是添加，每次只能添加一组键值对（注意等号两端不能有空格），可以分号分隔各个元数据的值
    • path：路径，默认为当前路径
    • domain：域名，必须是当前域名的一部分，否则无效
    • max-age：存活时间，以秒为单位，设置为-1代表删除当前Cookie
    • expires：过期时间，UTC格式，可使用Date.prototype.toUTCString()转化得到，设置时间已经过期会删除当前Cookie

Storage接口

用于window.sessionStorage和window.localStorage这两个对象中，每个域名都有一个自己对应的两个存储对象

• sessionStorage：作用域是当前页面标签下的同一个会话
• localStorage：存储在硬盘上，永久生效

方法和属性名	描述
Storage.length	所有数据项的个数
Storage.setItem(key,value)	设置数据项
Storage.getItem(key)	根据键名获取值
Storage.removeItem(key)	根据键名删除数据项，无返回值
Storage.clear()	清空整个数据仓库，无返回值
Storage.key(index)	获取指定索引的值

IndexedDB