这篇文章只是对我认为常用的缓存方式的学习记录。我参考了以下参考资料做了一个总结。您可以直接阅读参考链接中的文章。他们的记录比较全面，有图片。1、Http缓存浏览器缓存分为：强缓存和协商缓存。强缓存和协商缓存不是并行的。协商缓存是在强缓存的基础上增强的缓存功能。强缓存的过程：第一次请求：浏览器第一次向服务器发送请求，服务器会在响应头中添加Expires和Cache-Control:max-age=365000000，这两者之一或两者兼而有之请求标头。Then：浏览器收到响应后，会将响应头和响应资源一起缓存起来。下一次请求时：浏览器根据两个请求头的值计算当前缓存是否过期。如果没有过期，则直接响应缓存内容，不向服务器发送请求获取资源。(expires，它的值是GMT格式的绝对过期时间，比如2019年6月23日12:00:00过期，这样当客户端的时间过了这个时间缓存就会过期。Cache-Control:max-age=365000000，这个请求头的max-age值是一个时间段，也就是说保存的是相对时间，对于每一个请求，浏览器都会减去客户端第一次请求的时间，如果时间比较大超过这个相对时间，就会过期，需要重新请求资源）协商缓存的过程：第一次请求：浏览器第一次向服务器发送请求，服务器会加强缓存配置到响应头项（Expires｜Cache-Control），同时也会增加协商缓存的配置项（Last-Modified｜ETag）（Last-Modified是资源最后更新的时间，ETag头是服务器根据当前请求的资源生成的唯一标识，这个唯一标识是一个字符串，只要资源发生变化，这个字符串就会不同，与上次修改时间无关）然后：浏览器收到后响应，它将响应头和响应资源一起缓存。下一个请求：浏览器会先判断强缓存是否过期。如果还没有过期，就直接使用缓存资源。如果过期，它将请求资源发送到服务器。这时候浏览器会在请求头中添加If-Modified-Since或者If-None-Match（If-Modified-Since的值是上次请求返回的Last-Modified的值。If-的值None-Match是上次请求返回的ETag的值）服务器再次收到资源请求时：If-Modified-Since：服务器根据浏览器发送的If-Modified-Since判断资源是否发生变化，服务器上资源的最后修改时间。如果没有变化，则返回304NotModified，但不返回资源内容；如果有变化，则正常返回资源内容。当服务器返回304NotModified响应时，Last-Modified头不会被添加到响应头中，因为既然资源没有改变，Last-Modified就不会改变。If-None-Match：服务端根据浏览器发送If-None-Match，然后根据资源生成新的ETag。如果两个值相同，说明资源没有变化，否则有变化；如果没有变化，返回304NotModified，但不返回资源内容；如果有变化，资源内容会正常返回。与Last-Modified不同的是，当服务器返回304NotModified响应时，由于已经重新生成了ETag，因此即使ETag与之前的没有变化，也会在响应头中返回ETag。浏览器收到304NotModifiedResponse：表示资源没有变化，缓存的资源仍然可以使用。下图为流程图：2.CookieCookie（或Cookies）是指一般网站为了识别用户身份和进行会话跟踪而存储在用户本地终端上的数据（通常是加密的）。cookie一般在http请求的header中一起发送给服务器。一条cookie记录主要由key、value、domain、expirationtime、size组成。通常，用户保存用户认证信息。以下是cookie的常用接口：varsetCookie=function(c_name,value,expiredays,path){varexdate=newDate();exdate.setDate(exdate.getDate()+expiredays);document.cookie=c_name+"="="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString())+((path==null)?"":";path="+path";}vargetCookie=function(c_name){if(document.cookie.length>0){ //先检查cookie是否为空，返回""c_start=document.cookie.indexOf(c_name+"=") //通过String对象的indexOf()检查cookie是否存在，不存在则为-1 if(c_start!=-1){c_start=c_start+c_name.length+1 //最后的+1其实就是“=”号的意思，这样就得到了cookie值的起始位置c_end=document.cookie.indexOf(";",c_start) //其实刚才看到indexOf()第二个参数的时候，突然有点晕，然后才想起来是表示指定起始索引的位置……这个sentence是获取value的结束位置，因为要考虑是否是最后一项，所以通过“;”号是否存在来判断if(c_end==-1)c_end=document.cookie.lengthreturnunescape(document.cookie.substring(c_start,c_end)) //通过substring()获取值。要想理解unescape()，首先要知道escape()是干什么的。这是一个非常重要的基础。如果你想知道，你可以搜索它。文末还会讲解cookie编码的细节}}return""}下面是身份认证相关的：CookieAuthCookie认证机制是在服务端创建一个Session对象进行请求认证，并同时在客户端浏览器端创建一个Cookie对象；Cookie对象由客户端调出以匹配服务器端的会话对象。状态管理。默认情况下，当我们关闭浏览器时，cookie将被删除。但是可以通过修改cookie的过期时间，使cookie在一定时间内有效。TokenAuth：TokenAuth的优势Token机制相对于Cookie机制有哪些优势？支持跨域访问：Cookies不允许跨域访问，这对于Token机制来说是不存在的，前提是传递的用户认证信息是通过HTTP头传递的。Stateless（又名：server-sideextensiblerow）：Token机制不需要在server端存储session信息，因为Token本身包含了所有登录用户的信息，只需要在客户的cookie或本地媒体。更适合CDN：你可以通过内容分发网络请求你服务器端的所有信息（如：javascript、HTML、图片等），你的服务器只需要提供API即可。解耦：无需绑定特定的认证方案。Token可以在任何地方生成，只要你能在调用你的API时调用Token生成。更适合移动端应用：当你的客户端是原生平台（iOS、Android、Windows8等），此时不支持Cookie（需要通过Cookie容器来处理），会简单很多此时要使用Token认证机制。CSRF：由于不再依赖cookies，所以不需要考虑CSRF（跨站请求伪造）预防。性能：一次网络往返时间（通过数据库查询session信息）比做一次HMACSHA256计算的Token校验分析耗时多。3.本地存储localStorage是html5新的本地缓存方案，目前用的比较多。一般用于存放ajax返回的数据，以加快下一页打开时的渲染速度。没有到期时间设置。一般可以在里面存一个时间戳，每次从里面取出时间手动判断是否过期。API:localStorage.setItem()localStorage.getItem()localStorage.removeItem()localStorage.clear()四、会话存储sessionStorage属性允许你访问一个会话存储对象。与localStorage类似，只是localStorage中存储的数据没有过期时间设置，而sessionStorage中存储的数据会在页面会话结束时清空。只要浏览器打开，页面会话就会一直保持，重新加载或恢复页面仍将保持原始页面会话。在新选项卡或窗口中打开页面将启动新会话，这与会话cookie的工作方式不同。需要注意的是，无论是sessionStorage还是localStorage保存的数据都受限于页面的协议，简单来说就是不允许跨域。语法：//将数据保存到sessionStoragesessionStorage.setItem('key','value');//从sessionStorage获取数据vardata=sessionStorage.getItem('key');//从sessionStorage中删除保存的数据sessionStorage.removeItem('key');//从sessionStorage中删除所有保存的数据sessionStorage.clear();参考链接：浏览器端的九种缓存机制，你知道多少？浏览器缓存知识总结及应用浏览器缓存机制解析
