浏览器存储

浏览器存储

前端缓存

前端缓存技术方法主要分为http缓存和浏览器缓存。

HTTP缓存：强缓存、协商缓存浏览器缓存：storage 前端数据库和应用缓存

应用缓存主要是通过manifest文件来注册被缓存的静态资源，已经被废弃，因为它的设计有些不合理的地方，在缓存静态文件的同时，会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。所以，应

用缓存只适合那种常年不变化的静态网站。如此不方便，是被废弃的重要原因。

对于一些具有重复性的HTTP请求,比如每次请求得到的数据都是一样的,我们可以把这对[请求-响应]的数据都缓存在本地,下次就直接读取本地数据,不必再通过网络获得服务器的响应了,这样可以大大提升网络性能。

浏览器对服务器最近请求过的资源进行存储，减少与服务器的交互，减少对宽带浪费，减少服务器负担。分为强缓存和协商缓存。

HTTP控制缓存的字段主要包括Cache-Control/Pragma,Expires,Last-Modified/Etag。

本地强缓存如果过期了，就需要协商缓存，也就是去看服务器上的资源是否修改。

缓存存储

内存缓存：快速读取和实效性硬盘缓存：写入硬盘文件，需要I/O操作，重新解析改缓存内容，读取复杂，速度慢

浏览器中的缓存位置一共有四种，按优先级从高到低排列分别是：

Service Worker Memory Cache

Disk Cache Push Cache

大的JS、CSS文件直接丢进磁盘，反之丢进内存

内存使用率高时，文件优先进入磁盘

Cookie

调用 Cookie 时，由于可校验 Cookie 的有效期，以及发送方的域、路径、协议等信息，所以正规发布的 Cookie 内的数据不会因来自其他Web 站点和攻击者的攻击而泄露

Set-Cookie

当服务器准备开始管理客户端的状态时，会事先告知各种信息。

Set-Cookie: status=enable; expires=Tue, 05 Jul 2011 07:26:31 GMT; path

cookie字段

name = value 如果用于保存用户登录态，赋值 cookie 的名称和值expires=datecookie有效期path=path将服

expires

指定 Cookie 的有效期。省略 expires 属性时，其有效期仅限于维持浏览器会话（Session）时间段内

domain

表示cookie作用域

比如，当指定 .example.com 后，除 .example.com 以外， www.example.com或 www2.example.com等子域名都可以访问Cookie

secure

限制 Web 页面仅在 HTTPS 安全连接时，才可以发送 Cookie

Set-Cookie: name=value; secure

以上例子仅当在https://www.example.com/（HTTPS）安全连接的情况下才会进行Cookie 的回收

当省略 secure 属性时，不论 HTTP还是 HTTPS，都会对 Cookie 进行回收

HttpOnly

禁止JS脚本访问 Cookie

Set-Cookie: name=value; HttpOnly

使用 JavaScript 的 document.cookie 无法读取Cookie的内容。因此，也就无法在 XSS 中利用 JavaScript 劫持 Cookie

SameSite

是否允许跨域时携带Cookie

strict：任何情况都不允许作为第三方cookie

Lax：宽松模式，只能在请求方法为Get且请求改变了当前页面或打开新的页面时，允许cookie跨域访问

None：默认模式，请求自动携带cookie

Cookie 请求首部字段

告知服务器，当客户端想获得 HTTP状态管理支持时，就会在请求中包含从服务器接收到的 Cookie。接收到多个 Cookie 时，同样可以以多个 Cookie形式发送。

Cookie: status=enable

禁止js访问cookie

设置HttpOnly

JS Document.cookieAPI 无法访问cookie

JS设置cookie

document.cookie 属性来创建、读取、及删除 cookie