二十七----浏览器存储

缓存：就是在一定的生命周期里可以持久化的东西。
一个数据要存储。
step1:结合业务场景，确认生命周期；
step2:根据生命周期，选择合适的缓存范围；
step3:根据性能要求，去trade off 缓存。

db:老化的数据，全生命周期；
localstorage\cache:一段时间内的使用
sessionstorage:会话中
vuex\redux\闭包：运行时
data\reactive\ref\state\props:组件级别

一、浏览器缓存包括http缓存、webstorage、cookie、indexDB等。

1、http缓存包括强缓存（http1.0看expire字段是否设置，http1.1看cache-control:max-age是否设置）。浏览器请求时先判断本地缓存记录的时间和当前时间对比超过这个字段设置的时间则表示强缓存失效，失效则走协商缓存。若未失效则使用本地缓存
2、http缓存包括协商缓存（http1.1看cache-control:no-cache是否设置，last-modify,etag是否返回）。浏览器请求时如果有强缓存字段，先走强缓存逻辑，没有则走协商缓存。
1）有last-modify，则携带if-modify-since:last-modidfy传递给服务器，服务器收到后会将这个值与服务资源存的值对比，不一致则返回该资源，浏览器使用返回资源；一致则返回304，浏览器则使用本地缓存资源。注：这个方案应该精确到秒，所以在秒级上修改了资源，这种情况下资源会失效。
2）有etag，则携带if-none-match:etag传递给服务器，服务器收到后会将这个值与服务资源存的etag值对比，不一致则返回该资源，浏览器使用返回资源；一致则返回304，浏览器则使用本地缓存资源。
cache-control:max-age:强缓存，设置缓存的最大有效期，单位为秒，no-store：不缓存，no-cache:协商缓存。

1. 浏览器点击回车
   浏览器先检查本地缓存是否失效，如果没失效则命中强缓存，如果失效则走协商缓存向服务器发请求，如果资源未失效则返回304，失效则返回200
2. 浏览器点击刷新按钮
   浏览器会对本地缓存失效，但是会携带协商缓存使用的字段，向服务器发请求，如果资源未失效则返回304，失效则返回200
3. 在浏览器界面F5
   浏览器会对本地缓存失效，但是会携带协商缓存使用的字段，向服务器发请求，如果资源未失效则返回304，失效则返回200
4. CTR+F5（强制刷新）
   使得本地缓存失效，不使用缓存，直接请求服务器使用返回资源

http缓存位置：它主要存在disk cache和memery cache里，还有一个就是service worker，Push Cache（http2.0）
同源策略是浏览器的一个安全策略，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。同源判断的依据是：协议、域名、端口号必须相同。如果没有同源策略的话，很容易导致XSS和CSRF攻击。

node 模拟后端返回缓存设置
1、强缓存Expires(绝对时间)/cache-control:max-age（相对时间）

let http = require('http');
let url = require('url')
let path = require('path');
const {
    fs } = require('fs');
let mime = require('mime')
http.createServer(function(req,res){
   
  let {
   pathname} = url.parse(req.url,true);
  let filepath = path.join(__dirname,pathname);
  fs.stat(filepath,(err,stat)=>{
   
    if(err) {
   
      return sendError(req,res)
    } else {
   
      send(req,res,filepath)
    }
  })
}).listen(8080)

function sendError(req,res){
   
  res.end('not found')
}
function send(req,res,filepath){
   
  res.setHeader('Content-Type',mime.getType(filepath));
  //Expires设置了过期时间，在http1.0使用
  res.setHeader('Expires',new Date(Date.now()+30*1000).toUTCString())<