浏览器存储

浏览器缓存机制：本地缓存、DNS缓存、http缓存

本地缓存：

侧重点：大小、时效、同域、使用场景

Cookie

① 大小：4KB

② 时效：有过期时长，当时效过期后，浏览器会自动的删除

③ 同域：在所有的同源的窗口下都可以实现共享，会通过http请求自动的携带cookie

④ 使用场景：标记用户与跟踪用户行为的情况，推荐使用cookie

⑤ 如果是未设置过期时间的cookie,那么用户只要关闭浏览器(注意是关闭浏览器是不是关闭标签页)就会清除该cookie,并不会保持客户端状态。这种cookie也可以叫做session类的cookie,session顾名思义就是会话控制，则说明该cookie只在本次会话中有效，下次会话则会销毁。

  // 设置cookie的函数
   function setCookie(cname, cvalue, exdays) {
         var d = new Date();
         d.setTime(d.getTime()+(exdays*24*60*60*1000));
         var expires = "expires="+d.toGMTString();
         document.cookie = cname + "=" + cvalue + "; " + expires;
     }
   // 获取 cookie 值的函数
   function getCookie(cname) {
       var name = cname + "=";
       var ca = document.cookie.split(';');
       for(var i=0; i<ca.length; i++) {
         var c = ca[i].trim();
         if (c.indexOf(name)==0) return c.substring(name.length,c.length);
       }
       return "";
   }

LocalStroage

① 大小：4-5M

② 时效：持久性的保存，除非手动的清空否则永远不会过期

③ 同域：在所有的同源的窗口下都可以实现共享

④ 使用场景：适合长期保存在本地的数据（令牌），推荐使用localStorage

 let localStorage = window.localStorage;
 // 保存
 localStorage.setItem("key", "value");
 // 使用
 let value = localStorage.getItem("key");
 // 删除
 localStorage.removeItem("key");
 // 一键清除缓存
 localStorage.clear()

SessionStroage

① 大小：4-5M

② 时效：生命周期只在当前的会话中有效，同时当关闭浏览器时，就会清空数据

③ 即使在同源的情况下，不同的页面窗口不会实现数据共享

1. 通过Expires设置过期时长 MAX-Age设置失效前经过的秒数

2. 读写cookie --- document.cookie

④ 使用场景：敏感账号一次性登录，推荐使用sessionStorage

  let sessionStroage = window.sessionStroage;
  // 保存
  sessionStroage.setItem("key", "value");
   // 使用
  let value = sessionStroage.getItem("key");
   // 删除
  sessionStroage.removeItem("key");
   // 删除所有的数据
  sessionStorage.clear();

DNS缓存：

DNS缓存是域名与IP的关系；第一次访问去运营商下载DNS对照关系，存储本地客户端；再次请求从本地去DNS对照关系（第二次使用DNS缓存）

• 缺点：安全性低

• CDN：分布式存储

http缓存：

• 强制缓存和协商缓存

• 不能被缓存：html文件

• 可以被缓存：js css img/* 字体小图标文件

强制缓存和协商缓存

强制缓存的机制：Expires和Cache-Control的max-age字段在响应头中，先考虑强制缓存,强制缓存优先

• 报文：200

• 强缓存的意思就是不向服务器发起请求的缓存，也就是本地强制缓存。浏览器想要获取特定数据的时候，首先会检查一下本地的缓存是否存在该数据，如果存在，就直接在本地获取了，如果不存在，就向服务器所要该数据。

• 发生在浏览器端

• 强制缓存强制刷新会失效

协商缓存的机制：Last-modified(时间戳单位为秒，跨度大)和ETag（文件内容发生变化）Etag优秀级大于last-modified，在响应头中

• 报文：304

• 浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。

  再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比较成功，可以使用缓存数据。

• 每次会去访问服务器

  • if-Modified-Since 对应last-modified 和 if-None-math对应Etag 在请求头中

  • 访问不失效的为报文304

• 发生在服务器端