简介我们在做项目的时候，经常会说到Cookie和Session，但其实对它们了解的很少。我们仅仅知道如何使用它们，但这还远远不够，熟练掌握它们的特性才能让项目变得更好。让我们认识他们吧！###我们先来了解一下CacheCache是??数据缓存的意思。缓存的合理设置可以帮助我们提高访问速度，减少请求（直接读取缓存有效期内的缓存文件），减少直接从服务器拉取文件（缓存过期最后请求服务器检查文件是否被更改，如果没有，则返回304，然后读取Cache）；Cache中的数据一般是服务器上不经常变化的数据，比如图片、某些数据js、html、php等；如果经常变化的数据一般不缓存，那是没有意义的；如果一个经常变化的文件被缓存，就没有多大意义了。读取Cache的过程首先检查文件设置的缓存是否过期：如果过期，会重新向服务器发送请求，检查文件是否更新。如果没有，服务器会返回304NotModified，说明该文件在服务器上没有更新过，则直接从本地缓存中读取用户发起的文件请求；如果服务上更新了文件，服务器会返回一个新的文件，此时http返回码为200ok，更新缓存。如果没有过期，则直接读取本地缓存文件，不会发起http请求；在浏览器的网络控制台中，我们可以看到一些文件的标题。下面说说一些header设置的作用：ResponseHeadersaccess-control-allow-origin:*cache-control:max-age=691200content-length:0date:Sun,22Apr201803:25:41GMTetag:"5ad8603c-214cb"过期：2018年4月27日星期五13:33:04GMT服务器：marco/2.0status:304via:T.3.H,M.ctn-fj-foc-007x-request-id:30e1ceac71122f15ed9144c272406682RequestHeaders:authority:static.segmentfault.com:method:GET:path:/v-5ad86038/3rd/assets.js:scheme:httpsaccept:*/*accept-encoding:gzip,deflate,sdch,braccept-language:zh-CN,zh;q=0.8cache-control:max-age=0if-modified-since:Thu,19Apr201809:24:12GMTif-none-match:W/"5ad8603c-214cb"来源：https://segmentfault.comreferer：https://segmentfault.com/user/settings?tab=notifyuser-agent:Mozilla/5.0（WindowsNT6.1；WOW64）AppleWebKit/537.36（KHTML，如Gecko）Chrome/53.0.2785.104Safari/537.36Core/1.53。5006.400QQBrowser/9.7.13080.400expiresexpires为HTTP/1.0控制web缓存字段，表示服务器返回请求结果缓存的过期时间，即再次发起请求时，如果客户端的时间小于Expires的值，则直接使用缓存的结果；expires=当前服务器日期+缓存有效时间；时间格式为GTM，是一个绝对值cache-control用户控制http缓存，max-age表示客户端可以收到生命周期不大于指定时间（以秒为单位）的响应；最大年龄=0；表示每次请求文件时，都需要请求服务器检查文件上次缓存时是否被修改过；max-age=10；表示如果10s内再次请求该文件，则不需要向服务器发起读取文件的请求，而是直接读取本地缓存文件；在HTTP/1.1中，Cache-Control是最重要的规则，主要用来控制网页缓存，主要取值有：public：所有内容都会被缓存（客户端和代理服务器都可以缓存）private：所有内容只能由客户端缓存，Cache-Control默认值为no-cache：客户端缓存内容，但是否使用缓存需要协商缓存验证。no-store：不缓存所有内容，即不使用强制缓存和协商缓存。：缓存的内容会在xxx秒后过期，这是一个相对值。因为**Cache-Control的优先级高于expires**，那么直接根据Cache-Control的值进行缓存，也就是说600秒内再次发起请求，缓存的结果会直接用于强制缓存生效。***注意：当无法判断client的时间是否与server的时间同步时，Cache-Control是比expires更好的选择，所以当两者都存在时，只有Cache-Control生效。***以上只是对Cache的简单了解。想要更深入的了解浏览器的缓存机制，可以阅读这篇文章-->彻底理解浏览器的缓存机制。帮助。CookiesCookies是一种用于在客户端存储数据的选项。当我们向服务器发送任何HTTP请求时，服务器都会向浏览器返回一个带有Set-Cookie的HTTP响应头，其中包含一些会话信息。此响应标头可能如下所示：//ResponseHeaders响应标头HTTP/1.1200OKServer:nginx/1.10.1Date:Sun,22Apr201806:16:14GMTContent-Type:text/htmlExpires:Thu,19Nov198108:52:00GMTCache-Control:no-store,no-cache,must-revalidate,post-check=0,pre-check=0Pragma:no-cacheSet-Cookie:SID=t65ln3kllu7ujutldk4hcota05;path=/Content-Encoding:gzipthis响应头设置一个cookie，名称为SID，值为t65ln3kllu7ujutldk4hcota05。如果用户不是第一次访问，即本地已经有cookie，则在发送请求时将cookie发送给服务器，服务器对请求进行相应处理并返回相应信息；请求头可能如下：//requestHeaders请求头Accept:*/*Accept-Encoding:gzip,deflate,sdchAccept-Language:zh-CN,zh;q=0.8Connection:keep-aliveCookie:SID=t65ln3kllu7ujutldk4hcota05Cookiesetting方法为：document.cookie="name=value;domain=域名;path=/;expires=expirationtime;secure"其中name和value为必填项，其他可选；name和value都需要进行url编码--encodeURIComponent()现在介绍Cookie的组成：name：cookie的一个唯一确定的名称，不区分大小写，获取cookie就是根据namevalue:thecookie域中存储的字符串值：cookie对哪个域有效，如domain="aa.qq.com"，则qq.com无法读取该cookie。如果不设置，则默认请求来自当前域。路径：指定域中的路径。例如path="/book/"，则无法发送对www.aa.qq.com/cc/的请求Cookieexpires：Cookie过期时间，该值为GMT格式的日期只能在SSL链接时才会发送给服务器。比如https://www.aa.qq.com就可以，但是http://www.aa.qq.com就不行。cookies的缺点是每个浏览器的cookies数量较多，IE6及以下版本每个域名最多20个。IE7及以上版本每个域名最多50个。FireFox每个域名最多50个。Opera每个域名最多30个。Safari和Chrome没有硬性规定。应该有个限制大小Limit，一般在4k左右，最好不要超过4k。用户可以操作和禁用cookies，这使得功能受限且安全性较低。Cookie数据有路径（path）的概念，可以限制cookie属于某个路径。浏览器提供的设置cookies的方法比较简单，操作起来会比较麻烦。我们可以封装一个类CookieUtil{constructor(){}get(name){varcookies=document.cookie.split(";");变量curCookie；for(vari=0;i
