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

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

1、cookie

一、cookie是什么？

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

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

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

三、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

四、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();
}

2、本地存储

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

一、内置方法

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

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

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

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

clear()：清空全部的存储信息

二、使用场景：

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

3、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

4、cookie，sessionStroage，localstorage区别

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

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

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

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

三者的具体对好比下：

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

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