各位老铁们好，相信很多人对cookie小知识都不是特别的了解，因此呢，今天就来为大家分享下关于cookie小知识以及Web前端新手应该了解的Cookie知识的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
今天小编要跟大家分享的文章是关于Web前端新手应该了解的Cookie知识。正准备学习Web前端知识和准备从事Web
前端工作的小伙伴怎么能不了解Cookie。今天小编就为大家带来了这篇文章，让我们一起来看一看Web前端新手应该了解的Cookie知识。
一、Cookie的出现
浏览器和服务器之间的通信少不了HTTP协议，但是因为HTTP协议是无状态的，所以服务器并不知道上一次浏览器做了什么样的操作，这样严重阻碍了交互式Web
应用程序的实现。
针对上述的问题，网景公司的程序员创造了Cookie。
二、Cookie的传输
服务器端在实现Cookie标准的过程中，需要对任意HTTP请求发送Set-CookieHTTP头作为响应的一部分：
1.Set-Cookie:name=value;expires=Tue,03-Sep-201914:10:21GMT;path=/;
domain=.#;
浏览器端会存储这样的Cookie，并且为之后的每个请求添加CookieHTTP请求头发送回服务器：
1.Cookie:name=value
服务器通过验证Cookie值，来判断浏览器发送请求属于哪一个用户。
三、浏览器中的Cookie
浏览器中的Cookie主要由以下几部分组成：
·名称：Cookie唯一的名称，必须经过URL编码处理。(同名会出现覆盖的情况)
·值：必须经过URL编码处理。
·域(domain)：默认情况下cookie在当前域下有效，你也可以设置该值来确保对其子域是否有效。
·路径(path)：指定Cookie在哪些路径下有效，默认是当前路径下。
·
失效时间(expires)：默认情况下，浏览器会话结束时会自动删除Cookie;也可以设置一个GMT格式的日期，指定具体的删除日期;如果设置的日期为以前的日期，那么Cookie会立即删除。
·安全标志(secure)：指定之后只允许Cookie发送给https协议。
浏览器在发送请求时，只会将名称与值添加到请求头的Cookie字段中，发送给服务端。
浏览器提供了一个非常蹩脚的API来操作Cookie：
1.document.cookie
通过上述方法可以对该Cookie进行写操作，每一次只能写入一条Cookie字符串：
1.document.cookie='a=1;secure;path=/'
通过该方法还可以进行Cookie的读操作：
1.document.cookie//"a=1"
由于上述方法操作Cookie非常的不直观，一般都会写一些函数来简化Cookie读取、设置和删除操作。
对于Cookie的设置操作中，需要以下几点：
对于名称和值进行URL编码处理，也就是采用JavaScript中的encodeURIComponent()方法;
expires要求传入GMT格式的日期，需要处理为更易书写的方式，比如：设置秒数的方式;注意只有的属性名的secure;
每一段信息需要采用分号加空格。
1.functionsetCookie(key,value,attributes){
2.if(typeofdocument==='undefined'){
3.return
4.}
5.attributes=Object.assign({},{
6.path:'/'
7.},attributes)
8.
9.let{domain,path,expires,secure}=attributes
10.
11.if(typeofexpires==='number'){
12.expires=newDate(Date.now()+expires*1000)
13.}
14.if(expiresinstanceofDate){
15.expires=expires.toUTCString()
16.}else{
17.expires=''
18.}
19.
20.key=encodeURIComponent(key)
21.value=encodeURIComponent(value)
22.
23.letcookieStr=`${key}=${value}`
24.
25.if(domain){
26.cookieStr+=`;domain=${domain}`
27.}
28.
29.if(path){
30.cookieStr+=`;path=${path}`
31.}
32.
33.if(expires){
34.cookieStr+=`;expires=${expires}`
35.}
36.
37.if(secure){
38.cookieStr+=`;secure`
39.}
40.
41.return(document.cookie=cookieStr)
42.}
Cookie的读操作需要注意的是将名称与值进行URL解码处理，也就是调用JavaScript中的decodeURIComponent()方法：
1.functiongetCookie(name){
2.if(typeofdocument==='undefined'){
3.return
4.}
5.letcookies=[]
6.letjar={}
7.document.cookie&&(cookies=document.cookie.split(';'))
8.
9.for(leti=0,max=cookies.length;i
10.let[key,value]=cookies[i].split('=')
11.key=decodeURIComponent(key)
12.value=decodeURIComponent(value)
13.jar[key]=value
14.if(key===name){
15.break
16.}
17.}
18.
19.returnname?jar[name]:jar
20.}
最后一个清除的方法就更加简单了，只要将失效日期(expires)设置为过去的日期即可：
1.functionremoveCookie(key){
2.setCookie(key,'',{expires:-1})
3.}
介绍Cookie基本操作的封装之后，还需要了解浏览器为了限制Cookie不会被恶意使用，规定了Cookie所占磁盘空间的大小以及每个域名下Cookie的个数。
四、服务端的Cookie
相比较浏览器端，服务端执行Cookie的写操作时，是将拼接好的Cookie字符串放入响应头的Set-Cookie字段中;执行Cookie的读操作时，则是解析HTTP请求头字段Cookie中的键值对。
与浏览器最大的不同，在于服务端对于Cookie的安全性操碎了心
signed
当设置signed=true时，服务端会对该条Cookie字符串生成两个Set-Cookie响应头字段：
1.Set-Cookie:lastTime=2019-03-05T14:31:05.543Z;path=/;httponly
2.Set-Cookie:lastTime.sig=URXREOYTtMnGm0b7qCYFJ2Db400;path=/;
httponly
这里通过再发送一条以.sig为后缀的名称以及对值进行加密的Cookie，来验证该条Cookie是否在传输的过程中被篡改。
httpOnly
服务端Set-Cookie字段中新增httpOnly属性，当服务端在返回的Cookie信息中含有httpOnly字段时，开发者是不能通过JavaScript来操纵该条Cookie字符串的。
这样做的好处主要在于面对XSS(Cross-sitescripting)攻击时，黑客无法拿到设置httpOnly字段的Cookie信息。
此时，你会发现localStorage相比较Cookie，在XSS攻击的防御上就略逊一筹了。sameSite
在介绍这个新属性之前，首先你需要明白：当用户从#发起#的请求也会携带上Cookie，而从#携带过来的Cookie称为第三方Cookie。
虽然第三方Cookie有一些好处，但是给CSRF(Cross-siterequestforgrey)攻击的机会。
为了从根源上解决CSRF攻击，sameSite属性便闪亮登场了，它的取值有以下几种：
·
strict：浏览器在任何跨域请求中都不会携带Cookie，这样可以有效的防御CSRF攻击，但是对于有多个子域名的网站采用主域名存储用户登录信息的场景，每个子域名都需要用户重新登录，造成用户体验非常的差。
·lax：相比较strict，它允许从三方网站跳转过来的时候使用Cookie。
为了方便大家理解sameSite的实际效果，可以看这个例子：
1.//#服务端会在访问页面时返回如下Cookie
2.cookies.set('foo','aaaaa')
3.cookies.set('bar','bbbbb')
4.cookies.set('name','cccccc')
5.
6.//#服务端会在访问页面时返回如下Cookie
7.cookies.set('foo','a',{sameSite:'strict'})
8.cookies.set('bar','b',{sameSite:'lax'})
9.cookies.set('baz','c')
如何现在用户在#中点击链接跳转到#，它的请求头是这样的：
1.RequestHeaders
2.
3.Cookie:bar=b;baz=c
五、网站性能优化
Cookie在服务端和浏览器的通信中，主要依靠HTTP的响应头和请求头传输的，所以Cookie会占据一定的带宽。
前面提到浏览器会为每一次HTPP请求自动携带上Cookie信息，但是对于同站内的静态资源，服务器并不需要处理其携带的Cookie，这无形中便浪费了带宽。
在最佳实践中，一般都会将静态资源部署到独立的域名上，从而可以避免无效Cookie的影响。
以上就是小编今天为大家分享的关于Web前端新手应该了解的Cookie知识，希望本篇文章能够对正在从事Web前端工作和准备从事Web
前端学习的小伙伴们有所帮助。想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网！
作者|descire
来源|#/article/286535
*声明：内容与图片均来源于网络(部分内容有修改)，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜
还记得?2013年央视3·15晚会上关于Cookie泄露个人隐私的一段节目激起了轩然大波，Cookie这个IT术语瞬间红遍全国。很多网民对Cookie有严重的误解，因此，有必要在网民中间普及Cookie相关知识，本文将试图用通俗化的语言帮助网民理解Cookie的基本常识。
当我们在浏览器地址栏里输入诸如“http://www.xys.org”这样的地址时，我们就是告诉浏览器，用http协议去www.xys.org这个Web服务器上获取缺省文档并予以展示。所谓“协议”，是人为规定的计算机和计算机之间能相互理解的一种特殊的“语言”，HTTP协议是诸多互联网应用协议中的一个，不过却是当下最热门的一个互联网应用协议，和它比起来，POP3协议、Telnet协议、FTP协议、Gopher协议已经像是恐龙时代的产物了，基于上述古老协议产生的应用，基本上都已经被基于HTTP协议的应用取代了。
和那些古老协议相比，HTTP协议的一个优势是对客户端的应答速度较快。这要得益于它被设计为无连接无状态的协议。所谓无连接无状态，就是执行HTTP协议的Web服务器在处理了客户端的请求之后，立即就关闭了连接，也不保存客户端的访问状态，这就减少了服务器对内存的消耗和网络带宽的占用，相应就提高了服务器的工作效率。
我们可以用一个模拟生活场景来理解它们的工作模式。假设有一群顾客到商店里购物，对于POP3、FTP这样的协议来说，它们所安排的售货员为顾客提供一对一服务，直到顾客最终离开商店为止，如果售货员数量不足，其他的顾客就要等待；而对于HTTP协议，售货员只在顾客需要交互时才出现，三言两语之后就立刻跑去应付另外一个顾客的交互请求，售货员虽然忙一些，但即使很少的售货员也能应付很多的顾客，对于商店来说，工作效率提高了。
可惜的是，HTTP协议下的售货员是个脸盲症患者，它把每一个来询问它的顾客都当成一个新顾客。这和POP3、FTP等协议下的售货员不同，那些售货员都是从头到尾跟着你的，你要是问它：“鸡蛋多少钱一斤？”它回答：“5块钱一斤。”你说：“来10斤。”它会回答：“好嘞，10斤鸡蛋，您拿好了。”而在HTTP协议下是这样的——你问售货员：“鸡蛋多少钱一斤？”它回答：“5块钱一斤。”你说：“来10斤。”这时，它会满脸茫然：“你是谁？来10斤什么？我不记得你跟我说过话。”你：“……”
HTTP协议下的售货员要想很好的处理上述情况，就只能在你身上打上特定的标记，例如，你去问售货员：“这鸡蛋多少钱一斤？”它回答：“5块钱一斤”，同时，它在你身上贴张纸条“此人要买鸡蛋”，这样当你跟售货员说“来10斤”时，它听到你说话的同时，又看到你身上这个“此人要买鸡蛋”的纸条，自然就会明白你要买10斤什么，也就能正确地给你提供服务了。
从Web网站设计的角度来讲，要标记客户端计算机保存客户端访问状态，有三种常用方法：一是在返回给客户端的HTML页面中加入一些不显示的信息，这些信息会在用户点击页面中按钮进行提交时发送到服务器上；二是在返回给客户端的HTML页面的链接地址中加入一些信息，点击这些链接时就把这些信息回传到服务器上了；三就是我们今天要谈的主角：Cookie技术。
Cookie里的内容是服务器在把HTML页面数据返回给客户端的时候附加的一些信息，客户端浏览器在收到这些信息后，将其单独保存在计算机上某个特定的文件夹内，形成一个和服务器域名对应的文本文件，这些特殊文件里的特殊格式的文本文件就被称为Cookie，当浏览器再次访问同一个服务器的时候，会把上一次保存的Cookie内容同时发送到指定的服务器上。
Cookie并不神秘，它的出现是为了克服我们上面提到的三种标记方法中前两个方法所存在的不足。那些方法中保存的信息的有效期很没谱：如果浏览器关闭，页面消失，所保存的信息就没了；如果用户把页面用浏览器的“另存为”功能保存在计算机上，所保存的信息又会是永久存在的，而Cookie内保存的信息的有效期可以由服务器指定。此外，访问网站A页面时保存的信息有可能在B页面也有用，用方法一就没法子让他们共享；方法二虽然能够跨页面甚至跨服务器共享信息，但一个较为严重的问题是能传输的数据量太少。不过，归根结底，服务器采用哪种办法在客户端上打标记是网站设计时综合各种因素后自行选择的结果，作为我们使用者，客观上讲，只能被动接受他们的设计，除非你不使用他们的服务，或者愿意接受客户端无标记所带来的混乱和麻烦。
同样，服务器在客户端打标记时保存什么信息，也是网站设计时就确定了的事，网站用这些信息干什么，用户不可能知道，用户只有被动接受。这一点跟用不用Cookie技术无关，只要服务器需要给客户端打标记，都是这样。作为用户，我们只能选择那些有口碑的，对用户隐私保护考虑比较周到的网站，对于那些来路不明、乱七八糟的小网站，还是敬而远之吧。此外，我们还可以在退出浏览器的时候清空Cookie，这样做除了再次访问网站时麻烦一点外，没有什么大的坏处，就好像我们出了商店之后就可以把售货员贴在身上的纸条去掉一样——除非你希望下次进商店之后售货员还能认出那些标记。
现在存在一种叫做“第三方Cookie”的东东，它和所谓“第一方Cookie”没有本质上的区别，只不过它是由你访问的网站（“第一方网站”）中加载的第三方网站的代码创建的，Cookie中的域名指向的是第三方网站的域名，Cookie中的信息会回传到第三方网站上去。打个比方，就是你去甲商店里，那里的售货员除了在你身上留自己商店的标记，还附带帮乙商店在你身上打个标记，这样当你去乙商店的时候，它的售货员就能识别出你身上已经打过的标记。第三方Cookies是网络广告公司的最爱，因为它们可以在用户密集的网站上加入自己的代码，从而可以获取自己需要的信息。从理论上讲，它的安全性和“第一方Cookie”是一样的，但是，第一方网站和第三方网站合作的时候，对第三方网站的Cookie没有丝毫控制权，我们对第一方网站的信任，却自动转移到第三方网站上，这就造成一种隐私保护上的隐患。不过，目前主流浏览器都在“设置”里提供了对第三方Cookie是否接受的选项，而且越来越多的浏览器会默认禁止接受第三方Cookie。
那么，利用Cookie技术能否如3·15晚会上暗访广告销售人员时他们所吹嘘的那样“可以将全国90%的用户尽在掌握。他是男是女，年龄、身份，受教育程度，包括您的邮件注册，包括您参加某个品类抽奖的注册”“拿到cookie以后什么都可以知道，包括手机电脑多少都可以知道”？
理论上讲，Cookie里面当然可以存储这些信息，但是，像性别、年龄、QQ号等等这些精确的个人信息，除了你自己提交给网站再由网站记录在Cookie里之外，是不可能凭空出现在Cookie里的。而正规设计的网站，一般不会把这些信息保存在Cookie里（用户一清空Cookie就没了），它们最有可能将其保存在自己的数据库中，Cookie里顶多保存一个相关联的身份识别号码。
当然像兴趣爱好、年收入情况、上什么网等等信息，倒是有可能通过Cookie获得，不过获得的方法也不是直接从Cookie里读取，而是通过Cookie将客户端和一系列访问事件关联起来，用数据挖掘的方法获得。例如，第三方网站通过Cookie发现我所用的计算机的浏览器在某门户网站里访问了很多跟天文有关的页面，它就可以推断我喜爱天文。只是这样所得的结论是很不精确的，万一是我的朋友用我的电脑访问了这些页面呢？更不要说我们可以通过清除Cookie来干扰它的数据挖掘过程和结论。只不过广告主对分析结论的准确度不太讲究，他们只要保证自己的广告能够覆盖特定群体就满足了，“宁可错杀千人勿使一人漏网”而已。
谈到这里，需要提醒网民的是，虽然保存在自己计算机上的Cookie是安全的，但Cookie一旦被流氓软件截获和上传，其后果将是灾难性的。
2013年2月1日，《信息安全技术公共及商用服务信息系统个人信息保护指南》国家标准正式实施，这是我国个人隐私保护领域的一项重要进展。长期以来，我国个人隐私保护方面存在严重不足，相当一部分网民对此毫不在意，认为只有名人、大人物才需要保护个人隐私，这种错误观念使得自家电脑门户洞开、流氓软件大行其道，同时大批网民的个人资料被钓鱼网站利用、被中小网站收集贩卖。真诚希望广大网民能够从此重视这个问题，保护好自己的个人隐私不被非法侵害。
（作者：飞蠓）
Cookie，有时也用其复数形式Cookies，指某些网站为了辨别用户身份、进行 session跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于 RFC2109和 2965中的都已废弃，最新取代的规范是 RFC6265。（可以叫做浏览器缓存）。
扩展资料基于 Internet的各种服务系统应运而生，建立商业站点或者功能比较完善的个人站点，常常需要记录访问者的一些信息；论坛作为 Internet发展的产物之一，在 Internet中发挥着越来越重要的作用，是用户获取、交流、传递信息的主要场所之一，论坛常常也需要记录访问者的一些基本信息（如身份识别号码、密码、用户在 Web站点购物的方式或用户访问该站点的次数）。目前公认的是，通过 Cookie和 Session技术来实现记录访问者的一些基本信息。
Cookie技术诞生以来，它就成了广大网络用户和 Web开发人员争论的一个焦点。有一些网络用户，甚至包括一些资深的 Web专家也对它的产生和推广感到不满，这并不是因为 Cookie技术的功能太弱或其他技术性能上的原因，而是因为 Cookie的使用对网络用户的隐私构成了危害。因为 Cookie是由 Web服务器保存在用户浏览器上的小文本文件，它包含有关用户的信息。
Cookie技术产生源于 HTTP协议在互联网上的急速发展。随着互联网的深层次发展，带宽等限制不存在了，人们需要更复杂的互联网交互活动，就必须同服务器保持活动状态。
于是，在浏览器发展初期，为了适应用户的需求，技术上推出了各种保持 Web浏览状态的手段，其中就包括了 Cookie技术。1993年，网景公司雇员 Lou Montulli为了让用户在访问某网站时，进一步提高访问速度，同时也为了进一步实现个人化网络，发明了今天广泛使用的 Cookie
参考资料：百度百科-cookie
好了，文章到此结束，希望可以帮助到大家。