前端常见面试-存储/缓存篇

        前面文章专门对前端面试中css常见的考核知识点做了相关的梳理，大家需要的课自行查看上一篇文章：前端常见面试-css篇
        对于前端开发者来说，缓存是大家都耳熟能详的一个知识点，但是经常在面试的过中，稍微深入询问的时候，就会出现知识点混乱，比如常见的http缓存，本地存储，cookie的使用。下面分别就这三个方面具体阐述，以此来巩固大家的知识体系。

一、cookie

1、cookie是什么？

        HTTP协议本身是无状态的。什么是无状态呢，即服务器无法判断用户身份。Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就在请求的响应中向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。
        当然，对于cookie来说，其实就是存储在客户端（如：浏览器）中的一段特殊的键值对形式的字符串，可以直接使用document.cookie来进行获取和设置相关的cookie信息。

2、cookie的运行机制是什么？

        当用户第一次访问并登陆一个网站的时候，cookie的设置以及发送会经历以下4个步骤：客户端发送一个请求到服务器->服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 -> 客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 ->服务器返回响应数据.
        document.cookie属性看起来像一个普通的文本字符串，其实它不是。即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。如果您设置了新的 cookie，旧的 cookie 不会被覆盖。如果key的名称一致，则会进行覆盖之前的value。

3、cookie的具体属性及用途？

对于document.cookie来说，其主要包含四个属性，分别如下：

属性名称	属性的的用途	注意事项
NAME=VALUE	键值对，可以设置要保存的 Key/Value	NAME 不能和其他属性项的名字一样，否则不是新建而是覆盖之前同名的内容
Expires	设置对应cookie的失效时间，单位为s，即在该时间后就会失效被客户端删除	Cookie中通过getMaxAge()和setMaxAge(int maxAge)来读写该属性。maxAge有3种值，分别为正数，负数和0，具体表示：正数表示失效时间，当maxAge属性为负数，则表示该Cookie只是一个临时Cookie，不会被持久化，仅在本浏览器窗口或者本窗口打开的子窗口中有效，关闭浏览器后该Cookie立即失效，当maxAge为0时，表示立即删除Cookie
Domain	生成该 Cookie 的域名	在该域名下可以使用cookie
Path	设置cookie有效的具体路径，一般默认为/，表示根目录下的页面都有权利操作cookie
Secure	安全模式下传输cookie信息	如果设置了这个属性，那么只会在 SSH 连接时才会回传该 Cookie

4、cookie方法的封装

        对于cookie来说，没有自身的内置方法，如果对cookie进行操作，则需要对document.cookie直接进行操作，目前常用的cookie插件都是进行的封装，具体封装如下：

写入cookies

function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) +  ";expires=" + exp.toGMTString();
}

读取cookies

function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]);
    else
        return null;
}

删除cookies

function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

二、本地存储

        本地存储是html5引入的一项新技术，主要包括localStorage和SessionStorage两类。具体详见如下：

1、内置方法

        localStorage和sessionStorage两者都是挂载在window对象下的两个属性，其拥有一样的内置方法，分别为：

getItem():获取存储的信息,

setItem():创建或者修改存储的信息,

removeItem()：删除某一个存储的信息,

clear()：清空所有的存储信息

2、使用场景：

        Web应用允许使用浏览器提供的API实现将数据存储到用户电脑上。这样客户端存储遵循“同源策略”，因此不同站点的页面是无法相互读取对方存储的数据，而同一站点的不同页面之间是可以相互共享存储数据的，它为我们提供了一种通信机制，例如，一个页面填写的表单数据可以显示在另一个页面中。Web应用可以选择存储数据的有效期：临时存储可以让数据保存至当前窗口关闭或者浏览器退出；永久存储可以将数据永久存储在硬盘上。客户端存储的方式之一就是Web存储

三、web缓存

1. web缓存主要有：数据库缓存、服务器缓存（代理服务器缓存、CDN缓存），浏览器缓存

2. 浏览器缓存包括：http缓存、cookie缓存、local storage本地缓存

3. http缓存的几个术语：1）缓存命中率：从缓存中得到的数据请求数与所有请求数的比例。比例越高缓存越好 性能越好；2）过期内容：超过设置的有效期的内容，这些内容需要重新从服务器请求新数据或者需要在服务器验证内容是否修改（如果修改服务器更新失效时间，并且返回最新内容进行缓存，同时返回状态码为200，如果没有修改，服务器直接返回状态码304，3）验证：向服务器发送请求，验证过期内容是否有效，有效则直接返回304并刷新缓存失效时间；4）失效：把失效的缓存内容清除；

4.http缓存设置：通过设置html的meta来控制页面缓存，具体实例如下：

<meta http-equiv=“Cache-control” content

=“no-cache,max-age,must-revalidate,no-store”>

<meta http-equiv=“Pragma” content=“no-cache”>

<meta http-equiv=“Expires” content=“0”>

<meta http-equiv=“Cache” content=“no-cache”>

5. 浏览器缓存分为强缓存和协商缓存，其具体加载页面流出如下：1）浏览器先根据http的请求头信息来判断是否命中强缓存，如果命中强缓存则直接加载缓存中的资源，不会去服务器请求新的资源；2）如果未命中强缓存，则会向服务器发送资源请求，服务器会直接验证相关的请求的资源是否在浏览器本地缓存失效，如果没有失效，则服务器不会返回资源信息，此时的状态码为304，浏览器直接从缓存中获取资源；3）如果未命中协商缓存，即服务器校验发现浏览器本地缓存内容失效，则返回新的请求资源并更新浏览器的缓存，此时的状态码为200

6. 属性的具体讲解：

1）Cache-control：是一个相对时间，与客户端时间进行比较，从而来判断缓存是否失效，具体包括：max-age 最大失效时间，即在该时间内缓存都有效，单位为s，设置了max-age=0时，获取资源之前都需要先校验Etag和Last-modify，来判断资源是否进行修改，如果未修改服务器直接返回304，no-cache强制使用缓存前必须发送资源请求到服务器进行校验本地缓存是否有效；no-store 禁止使用缓存资源，必须去服务器请求新的资源；public 表示响应可以被任何对象（客户端、代理服务器 等）缓存；private 只能被单个对象（如操作系统等用户，浏览器）缓存，不能被代理服务器缓存；must-revalidate 告诉浏览器或者缓存服务器 在本地文件过期之前使用本地文件，本地文件一旦过期就要去服务器进行文件检验，如果服务器检验维修改则直接返回304（目前不常用）

2）Expires 响应头过期时间，需要和Last-modify一起使用，优先级低于Cache-control；Expires是以绝对时间，如果客户端时间更改则会导致客户端与服务器时间差造成缓存失效，因此才引入Cache-control

3）Pragma：用于向后兼容http1.0协议的缓存服务器，那时候的http1.1协议中还没有Cache-control

4）Last-Modified / If-Modified-Since：

浏览器第一次请求服务器资源的时候，服务器返回的响应头（response）中会加上Last-Modified，其是一个时间标示，表示资源的失效时间

当浏览器再次请求该资源的时候 请求头（request）中会带有If-Modified-Sinxe，其值就为缓存是的Last-Modified的值，去服务器进行校验缓存是否失效，未失效返回304，失效返回新的资源并更新缓存

⚠️缺点：1）Last-Modified的时间只能精确到秒，如果在一秒内多次修改则无法判断资源被修改；2）如果文件被定时生成 并为改变内容时，缓存会失效；3）服务器没有获取到最新的修改时间造成资源无法更新。因此引入了ETag。

5）ETag / If-None-Match：

浏览器第一次请求服务器资源的时候，服务器返回的响应头（response）会带有ETag表示符，当浏览器再次请求时会在请求头加上If-None-Match，其值就为缓存时的ETag的值。

⚠️：Last-Modified和ETag可以同时使用，但ETag的优先级较高，会先比较ETag，如果相同才会去比较Last-Modified，最终由服务器决定是否返回304

四、cookie，sessionStroage，localstorage区别

面试中，经常会将三者放在一起进行对比，具体来阐述他们的相同点和不同点：

        cookie的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

        sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

        localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

三者的具体对比如下：

        因此，根据合理的情况进行使用对应的存储，才能能达到更加有效的效果。

下面将对前端中的js方面的知识做一个具体的讲解，具体请看下一篇文章：前端常见面试-js基础篇