标签可以保留回车和空格等，你可以随意编写和显示内容。Cookies可以看作是一种允许浏览器存储在计算机本地硬盘上的隐藏位置的设置。在本地开发一个存储空间，用于存储某些特定的内容。如果服务器端设置了允许使用cookie，那么浏览器每次向同一个域名服务器发送请求，都会带上一个cookie，也就是说每次发送请求，浏览器都会存储cookie在本地硬盘上的一个隐藏位置。文件被发送到服务器，由服务器处理。通常，我们习惯将用户的登录信息保存在cookie中，那么服务器可以通过浏览器发送给它的cookie来判断用户是否已经注册了吗？,用户名和密码是否正确？,用户名和密码是否匹配？,用户有多少级？...相应地，返回相应的网页内容。为什么我总觉得这里看不懂？？这是因为cookies的概念涉及服务器端和浏览器端，感觉两者交织在一起。因此，有必要理清思路：cookies的基本运行过程。cookies的基本运行流程首先，浏览器会向服务器发送一个东西（对象，散列，数组，随便你叫什么）的请求其次，服务器会对发送给它的东西进行处理，得到结果通过Set-Cookie响应头以字符串的形式返回给浏览器。该字符串称为cookie。第三，现在浏览器获得了Set-Cookie响应头并被允许使用cookie。域名网站服务器发出的请求会带上cookie。四、对于每一次请求，服务器端都可以读取cookie，获取cookie中包含的信息（用户信息、特定页面信息等），然后将相应的内容返回给浏览器Cookie示例前端代码：$。post('/sign_in',hash).then((response)=>{window.location.href='/index.html'},(request)=>{alert('邮箱与密码不匹配')})使用node.js编写后端代码：if(path==='/sign_in'&&method==='post'){//你的代码response.setHeader('Set-Cookie','sign_in_email=${email}';HttpOnly;Max-Age=3000');//你的代码}elseif(path==='/index.html'){//你的代码让cookies=request.标题.cookie；//yourcode}在上面的示例代码中，在第一步中，前端代码（浏览器）使用jquery的post()方法向服务器发送请求到/sign_in路径，并将变量hash传递给服务器。第二步，后端代码（服务器端）对//your代码中的变量hash进行处理，将处理结果转为'sign_in_email=${email}'的字符串（其中${email}代表所代表的数据通过变量email），然后设置响应头Set-Cookie返回给浏览器，并添加各种设置，如HttpOnly、Max-Age等（详见https://developer.mozilla.org...）.第三步，浏览器收到服务器返回的响应头Set-Cookie和cookie(string)，表示请求成功，会将网页重定向到/index.html（这里使用了promise:.then((response)=>{window.location.href='/index.html')。于是浏览器又向服务器发送了一次请求。这次请求会带上cookieStep4，服务器又收到一次请求，这次请求的路径是/index.html，带有cookies。然后，服务端可以通过request.headers.cookie获取cookie，然后在//你的代码中处理后，在//你的代码中返回相应的页面给浏览器，就像是Firfox的www.segmentfault.com不是chorme的www.segmentfault.com。cookie保存在硬盘上一个神秘的文件中，cookie很容易被修改。用户可以进入浏览器控制台修改cookie。见下图。控制台进入存储，进入Cookies。我们修改两个值，刷新后，一个值会改回来，另一个值不会改变。cookie的有效期默认由浏览器自行决定。当然可以通过后台设置cookie的保存时间当然不同后台的语法不一样，写法也不一样。通常，设置Max-Age或Expires属性。详情请参考：Set-Cookie：https://developer.mozilla.org...HTTPcookies：https://developer.mozilla.org...Cookie应用可想而知，最常用的cookie是注册&登录~~~先在浏览器注册，注册后向浏览器发送请求，举报！请求注册成功页面！！服务器查看自己的数据库，这是一个新兵，保存下来，然后返回包含新兵狗牌的cookie和注册成功的页面。此cookie有时间限制。在此时间段内，新兵访问服务器时无需上报（浏览器发送请求时始终携带此cookie）此时间段后cookie失效（浏览器发送请求时不带cookie），抱歉，请证明自己（登录，获取新的老狗卡cookie和登录成功页面）sessioncookie很好，可以让服务器知道我们是VIP用户，但是因为容易被查看，容易被篡改，所以引出一个新的概念会话，而会话更像是一种技术而不是一种设置，服务器直接将用户信息存储在cookie中。现在，服务端把sessionId放在cookie中，然后根据sessionId去session表中查找sessionId对应的相关内容。那为什么要防止cookie容易被篡改的问题呢？因为sessionId中保存的是随机数Math.random()，如果取一个位数很多的随机数，一般人是没办法猜到的。他们不知道哪个随机数对应于用户，哪个不对应。如果sessionId被删除了怎么办？没办法，只能重新登录，也就是重新提交，重新分配随机数。看上面的图片。上图是chorme中控制台中的Application→Storage→Cookies选项。可以看到服务端给浏览器发送了一个带有sessionId的cookie，一个随机数。之后浏览器会向服务器发送请求，上面的cookiesession其实本质上就是一个cookie，只是增加了一个中间的sessionId。让我们看一下会话的基本过程。数组，随便你怎么说）到服务器其次，服务器有一个hash叫session，hash的key是sessionId（随机数），value是第一个发给服务器的东西的处理结果step:一个字符串，之前的cookie三、服务器会设置响应头Set-Sookie，将sessionId（随机数）以cookie的形式发送给浏览器四、之后浏览器每次请求服务器，它会带上这个包含sessionId的cookie，服务器会读取sessionId，在sessionhash中查找sessionId对应的值，然后进行相应的操作。会话示例前端代码：$.post('/sign_in',hash).then((response)=>{window.location.href='/index.html'},(request)=>{alert('邮箱和密码不匹配')})使用node.js编写后端代码：letsessions={};if(path==='/sign_in'&&method==='post'){//你的代码让sessionId=Math.random()*100000000;session[sessionId]={sign_in_email:email};response.setHeader('Set-Cookie','sessionId=${sessionId}';HttpOnly;Max-Age=3000');//你的代码}elseif(path==='/index.html'){//你的代码letcookies=request.headers.cookie;让sessionId=;让电子邮件=session[sessionId];//yourcode}上面发生的事情通过和cookies对比就知道了：首先，我们设置Ahashletsession={}其次，在服务端我们生成一个随机数sessionId作为session的key，获取email为key的值三、服务器设置Set-Cookie响应头，将sessionId作为cookie返回给浏览器四、浏览器请求成功，网页重定向到/index.html，请求为使用包含sessionId的cookie重新发送。五、服务端接收cookie，获取sessionId，搜索session，获取对应的emailat//你的代码返回对应的内容localStoragelocalStorage是HTML5新发布的API，它是一个hash，它的作用就是字面意思意思是本地存储，但这里的本地是指浏览器。请参考：https://developer.mozilla.org...使用起来并不难，可以使用localStorage自己的方法将数据添加到这个hash中，然后使用localStorage自己的方法调用其中的数据。localStorage方法设置一个localStorage值：setItemlocalStorage.setItem("cat","rainy");获取localStorage值：getItemvarcat=localStorage.getItem("cat");删除localStorage值：removeItemlocalStorage.removeItem("cat");清除所有localStorage值：clearlocalStorage.clear();检查localStorage哈希：localStorageconsole.log(localStorage)；localStorage的特性与http无关，也就是说它不存在于浏览器与服务器的通信中，请求时不会将localStorage的值包含在响应中。只有同域名的页面才能读取localStorage。当然localStorage是浏览器本身的存储空间，所以不同的浏览器是不能互相读取的。当页面刷新或关闭时，localStorage中的值不会消失，所以称为local~localStorage的物理地址存储在硬盘上的一个文件中。localStorage对每个域名的最大存储空间由浏览器设置，一般在5MB左右，如果溢出，会出现以下提示永久有效，除非手动清除sessionStorage。这个接口的作用和localStorage一样，也是给浏览器开辟了一个存放数据的地方。请参考：https://developer.mozilla.org...sessionStorage的方法请参考上一章localStorage的方法。请将localStorage替换为sessionStorage。sessionStorage的特性可以参考上一章localStorage的特性。唯一的区别是关闭页面后sessionStorage被清空。请看下面的动画。总结图片理解cookie&session就像去游乐园（服务器）。您可以选择买票（登录，获得cookie）或不买票（不登录，直接购物）。不买票只能玩部分项目（网站公开内容），买票可以解锁更多项目（网页私有内容）。那么这张票，如果是实名认证，上面是你的名字和身份证号。这是一个cookie方法。如果票上只有一个号码，游乐园需要通过号码查数据库来对你进行身份验证，那么这是一个sessioncookie和session有什么区别？Session是基于cookie实现的。session并不直接将用户信息保存在cookie中，而是将sessionId放入cookie中，传递给服务器。服务器使用sessionId在会话哈希中找到相应的值。cookie和localstorage有什么区别？cookie会随着每次请求发送到服务器，但是localStorage不会带到服务器，它是浏览器的一个存储地方。另外，cookie一般大小在5KB左右，而localStorage一般大小在5MB左右。sessionStorage和localStorage有什么区别？sessionStorage在页面关闭（session结束）后完全清空，而localStorage则不然。作为前端，最好不要直接读/写cookie。cookie的内容越多，发送到服务器的时间就越长，影响请求时间，减慢访问速度。如果一般数据不需要发送到服务器，请使用localStoragehttpcacheCache-Control顾名思义，控制缓存如果服务器设置了这个设置，则意味着页面会被放入缓存中，当浏览器需要向服务器请求，请求不会发送到服务器，而是直接调用缓存中的页面。各种属性详见：https://developer.mozilla.org...请看下图，右侧浏览器Chorme向服务器Server请求/main.js，服务器返回一个Max-Age=30给浏览器ChormeCache-Control响应头。然后在接下来的30s内，浏览器Chorme会再次向服务器请求/main.js，注意！！！必须是完全相同的网址！！！，会直接从缓存（内存）中调用main.js，直到30秒后，才能再次从服务端获取main.js。Cache-Control使用前端代码：$.post('/sign_in',hash)。then((response)=>{window.location.href='/index.html'},(request)=>{alert('Theemailaddressdoesnotmatchthepassword')})使用Node编写的后端。js:if(path==='/sign_in'&&method==='post'){//你的代码response.setHeader("Cache-Control","max-age=30");//yourcode}以上代码显示，在30秒内，任何向服务器/sign_in路径的post请求都不会发送，而是直接调用缓存中的/index.html页面。Cache-Control的几个特性通常请不要在首页设置缓存，如果设置了，则意味着在任何操作之后，页面都会从缓存中调用，这样就不会更新新的页面了。除了首页，其他资源都可以设置成10年，300000000，3后面的8个0是什么？10年？那么需要改变什么？修改url原页面中引用的js，例如这样：现在只需要更正一下：看出区别了吗？Toomany?/v=1，但是两个路径都调用了同一个文件。Cache-Control控制的缓存的物理地址在硬盘的某个位置。浏览器将设置固定大小。如果太多了，前面ClearcacheofExpires一次，我们用Expires设置缓存控制响应头：if(path==='/sign_in'&&method==='post'){//你的代码response.setHeader("Expires","Sun,04Feb201814:00:05GM");//yourcode}不同的是Expires设置的是过期时间点，过期时间点指的是本地时间，本地时间会因为机器故障、人为修改等原因发生变化，并不完全准确。Cache-Control设置过期时间段。另外，如果同时设置了Cache-Control和Expires，Expires会被覆盖忽略。ETagMD5全称：MD5InformationDigestAlgorithm英文：MessageDigestAlgorithmMD5功能：比较两个文件区别原理：一个文件会通过几个步骤生成一个128-bit（16-byte）的散列值（hashvalue）。特点：两个文件的差异越小，计算出的MD5值差异越大。用途：专门生成MD5软件，npm安装。..ETag如果需要开启ETag设置，服务器需要设置ETag响应头，将服务器端页面的MD5值返回给浏览器。这样浏览器在下一次请求时，会额外提交一个请求头if-none-match，里面存放的是服务器返回的MD5值。这样，服务器就可以将自己当前的MD5与浏览器发送的MD5进行比较。如果相同，则无需返回服务器端页面。如果不同，则将服务器端的新页面返回给浏览器。ETag前端代码示例：$.post('/sign_in',hash).then((response)=>{window.location.href='/index.html'},(request)=>{alert('电子邮件和密码不匹配')})使用Node.js写的后端：if(path==='/sign_in'&&method==='post'){//yourcodeletstring=fs.readFileSync('./sign_in.html','utf-8');让fileMD5=md5(字符串);让lastMD5=request.headers['if-none-match'];如果（fileMD5===lastMD5）{response.statusCode=304;}else{response.setHeader("ETag",fileMD5);响应.write(字符串);}//你的代码}来来来，看这里：首先，浏览器的第一次请求没有if-none-match的请求，所以服务端会设置一个响应头response.setHeader("ETag",fileMD5);,将服务器端页面的MD5返回给浏览器。二、浏览器再次发送请求时，会带上一个额外的请求头if-none-match三、看后端代码，得到浏览器请求的MD5letlastMD5=request.headers['if-none-match'];,获取当前MD5let文件MD5=md5(string);（已经用npm安装了生成MD5的程序），如果相同，则返回304if(fileMD5===lastMD5){response.statusCode=304;}，如果不同的是，返回一个新的MD5和一个新的页面else{response.setHeader("ETag",fileMD5);response.write(string);}Last-ModifyLast-Modify和Etag的功能和用法一样，唯一不同的是ETag返回一个MD5值，而Last-Modify返回一个时间点。即ETag比较浏览器页面和服务器页面的MD5，Last-Modify比较浏览器页面和服务器页面的时间点。如果更新时间间隔较短，请选择ETag，如果更新时间中等，则可以选择Last-Modify。当然，ETag优先级高于Last-Modify。另外，Lsat-Modify不支持秒级更新。这段请参考：https://www.zhihu.com/questio...总结对HTTP缓存有如下控制：Cache-Control：使用Max-Age设置缓存过期时间段Expires：直接设置缓存过期时间点ETag：比较两端文件的MD5值Last-Modify：比较两端文件的最后修改时间点
