一篇文章搞懂缓存机制，cookie和浏览器缓存~
在本篇文章中，我们会用通俗易懂的语言简要介绍cookie和浏览器存储机制，然后具体展开总结一下浏览器存储在面试中八股常考点，文章有点长，看完大概需要花费8分钟~
缓存机制，cookie和浏览器缓存
-
- 1. cookie
- 2.localstorage和seesionstorage
- 3.常见八股考试点
-
- 3.1 缓存存储
- 3.2 Cookie
-
- SetCookie
- Cookie
- 3.3 Webstorage
-
- localStorage
- sessionStorage
1. cookie
cookie是一种存储机制，当我们在请求数据的时候是没有任何cookie的。
具体的过程我们可以用下图表示：
从图中我们可以看到，首先由客户端向服务器发送请求，服务器收到请求之后，就会在请求头中设置set-cookie,set-cookie的值就是后续客户端需要携带的cookie信息，当客户端再次向服务器请求数据的时候，就需要携带这个cookie信息，值得注意的是，除了第一次请求数据不需要携带cookie之外，其他每一次请求数据都需要携带cookie；
这里我们注意到一个问题，假如每次发送都携带很大量的
cookie数据，cookie如果本身就很大的话，不是在传输过程中占用很大的带宽和资源，而且cookie是在94年设计出来的，那个时候的带宽资源比现在要紧张多了，因此把cookie设置的很小，一般小于4kb，甚至更小；
下面我们具体举例来说明cookie的使用：
首先是很常见的登录页面，该页面由一个表单组成，如下所示：
<form >
<label>用户名</label>
<input type="username">
<label>密码</label>
<input type="password">
<input type="checkbox" id="remmemberMe">
<label for="remmenberMe">记住我</label>
<input type="submit" value="登录">
</form>
在页面中展示如下所示：
这里点击checkbox，默认记住密码。
接下来我们引入js代码，来控制cookie：
<script>
const username=document.querySelector('input[type="username"]');
const checkbox=document.querySelector('input[type=="checkbox"]');
const submit=document.querySelector('input[type="submit"]');
submit.addEventListener('click',e=>{
if(checkbox.checked && username.value!=''){
let key='username';
let value=encodeURIComponent(username.value);
let twodays=2*24*60*60;//这里的单位是秒
document.cookie=`${key}=${value};max-age=${twodays}`;
}
e.preventDefault();
});
</script>
这里设置cookie的基本语法就是document.cookie,不能省略掉前端的document.,且cookie的内容一般是键值对，且经过了编码。
这个时候我们打开liveServer,输入username=123,密码为123，并勾选记住密码，并点击提交，打开后台应用程序，我们可以看到cookie:
2.localstorage和seesionstorage
随着科技的进步，网页的功能越来越丰富，有很多的个人设置并不需要获取，比如浏览器的浏览网页的时候的主题设置，这些个人设置完全可以保存在客户端里面，随着HTML5的出现，就出现了web存储，其中两个重要的对象，就是
localstorage和sessionstorage;
具体使用localstorage和sessionstorage可以通过下图来描述整个过程：
如果这里用的web存储是locastorage,就会永远保存在浏览器里面，当然，可以自行删除；如果使用的是sessionstorage，也会保存在浏览器里面，但是只要关闭浏览器，就会被删除，localstorage虽然被保存下来，但是他本身不参与服务器通信，这样看web存储的容量比cookie大的多;
这里就不具体举例了，如果我们要在js中设置localstorage,就直接设置localstorage.setItem(key,value);
如果要获取信息，就直接设置localstorage.getItem(key);
这里的sessionstorage是一样的，就不作过多阐述；
3.常见八股考试点
3.1 缓存存储
从缓存位置上来说分为四种，并且各有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。
四种缓存分别是（优先级按从高到低排列）：
- Server Worker
- Memory Cache(内存缓存）：快速读取，具有实效性
- Disk Cache（磁盘缓存）：写⼊硬盘⽂件，需要I/O操作，重新解析改缓存内容，读取复杂，速度
慢 - Push Cache
⼤的JS 、CSS⽂件直接丢进磁盘，反之丢进内存
内存使⽤率⾼时，⽂件优先进⼊磁盘
3.2 Cookie
SetCookie
从上面的解释可以知道当客户端第一次向服务器请求数据后，服务器会返回setcookie，字段设置如下：
- name=value，赋值cookie的名称和值；
- expires，指定cookie的有效期，如果省略了这个属性，有效期仅限于维持浏览器会话时间段内；
- domain:指定cookie的作用域，比如，当指定.example.com之后，除 .example.com 以外， www.example.com或www2.example.com等⼦域名都可以访问Cookie
- secure：限制web页面仅在https安全连接时，才可以发送cookie；比如
Set-Cookie: name=value; secure,这个表示仅当在（HTTPS）安全连接的情况下才会进⾏Cookie
的回收，当省略 secure 属性时，不论 HTTP还是 HTTPS，都会对 Cookie 进⾏回收 - HttpOnly：禁止JS脚本访问Cookie；例如：
Set-Cookie: name=value; HttpOnly表示使用document.cookie无法读取Cookie的内容； - SameSite：是否允许跨域的时候携带Cookie.
strict表示任何情况都不允许作为第三方cookie；
Cookie
这里描述用户端携带的Cookie字段：
上面setCookie的设置在这里是通用的。
就不作过多阐述
3.3 Webstorage
localStorage
特点：
- ⽣命周期：持久化的本地存储，除⾮⼿动删除数据，否则数据是永远不会过期的
- 存储的信息在同⼀域中共享
- ⼤⼩：5M，和浏览器⼚商有关
- 本质上是对字符串的读取，若存储内容过多会消耗内存空间，导致页⾯卡顿
- 受同源策略限制
缺点
- ⽆法像cookie⼀样设置过期时间
- 只能存⼊字符串，⽆法直接存储对象
sessionStorage
和localStorage相似，唯⼀不同就是⽣命周期，⼀旦页⾯关闭，sessionStorage将会删除数据
相同点
- 存储⼤⼩：⼀般都是5MB
- 存储位置：都存在客户端
- 存储内容类型：只能存储字符串类型
- 获取⽅式：
window.localStorage - 应⽤：
localStorage⽤于长期登录，适合长期保存在本地的数据。sessionStorage
⽤于敏感账号⼀次性登录。 - 接口封装
优点
- 存储空间⼤
- 节省⽹络流量
- 快速显⽰
- 安全性
- 对于那种只需要短暂存储关闭页⾯就可以丢弃的数据，
sessionStorage很好⽤