一篇文章搞懂缓存机制，cookie和浏览器缓存~

admin管理员组

文章数量:1530346

在本篇文章中，我们会用通俗易懂的语言简要介绍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之后，除 .example 以外， www.example或www2.example等⼦域名都可以访问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

特点：

1. ⽣命周期：持久化的本地存储，除⾮⼿动删除数据，否则数据是永远不会过期的
2. 存储的信息在同⼀域中共享
3. ⼤⼩：5M，和浏览器⼚商有关
4. 本质上是对字符串的读取，若存储内容过多会消耗内存空间，导致页⾯卡顿
5. 受同源策略限制

缺点

• ⽆法像cookie⼀样设置过期时间
• 只能存⼊字符串，⽆法直接存储对象

sessionStorage

和localStorage相似，唯⼀不同就是⽣命周期，⼀旦页⾯关闭，sessionStorage将会删除数据
相同点

1. 存储⼤⼩：⼀般都是5MB
2. 存储位置：都存在客户端
3. 存储内容类型：只能存储字符串类型
4. 获取⽅式：window.localStorage
5. 应⽤：localStorage⽤于长期登录，适合长期保存在本地的数据。sessionStorage
   ⽤于敏感账号⼀次性登录。
6. 接口封装

优点

1. 存储空间⼤
2. 节省⽹络流量
3. 快速显⽰
4. 安全性
5. 对于那种只需要短暂存储关闭页⾯就可以丢弃的数据，sessionStorage很好⽤

本文标签： 缓存一篇文章浏览器机制cookie