扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家介绍如何理解客户端与服务器cookie，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
成都创新互联公司是一家集网站建设,南康企业网站建设,南康品牌网站建设,网站定制,南康网站建设报价,网络营销,网络优化,南康网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
cookie是一种早期使用的客户端存储机制（现在仍在广泛使用），cookie数据会在Web浏览器和Web服务器之间传输， 因为早期cookie是针对服务器脚本设计的，所以服务端脚本可以读、写存储在客户端的cookie的值。 值得注意的是， 任何以cookie形式存储的值，无论服务器端是否需要，每一个HTTP请求都会把这些数据（cookie数据）传输到服务器端。但是cookie的存储量较小，一般不得超过4kb，即4096个字节。由于存储能力较弱，现在比较流行的是WebStorage，
Cookie是访问过的网站创建的文件，用于存储浏览器信息，例如个人资料。
cookie的缺点：
数据存储大小：4kb，作为数据存储容器，却只有4kb，对于目前稍微有一些繁杂的页面，cookie就不够用了。
安全性问题： cookie是在HTTP中明文传递的（HTTPs不是，这和协议有关，与cookie本身无关），所以说这是非常不安全的。
网络负担： 之前提到cookie会随着HTTP请求在web浏览器和服务器间传递，这是非常浪费带宽的。
HTTP Cookie，通常直接叫做cookie，标准要求服务器将Set-Cookie作为响应的一部分，其中包含会话信息，这种服务器响应报文的首部字段可能如下，其中以name为名称、以value为值，这是要求客户端发送name这个键名的cookie值，如下：
HTTP/1.1 200 OK Content-type: Text/html Set-Cookie: name=value Other-header: other-header-value
那么浏览器端的请求就是这样的：
GET /index.html HTTP/1.1Cookie: name=value Other-header: other-header-value
即把服务器需要的name的值发送到服务器端。
将cookie发送到服务器可以使得服务器知道关于此用户的更多信息。
注意： 每一个cookie的格式都是这样的：
注意： cookie是存在有效期的， 在默认情况下，cookie的声明周期就是在浏览器关闭的时候结束，如果想要使得cookie在浏览器关闭之后还可以用，就要为cookie设置有效期，也就是cookie的实效日期。
我们可以使用 console.log(window.navigator.cookieEnabled) 查看我们自己浏览器的cookie功能是否打开，它返回一个布尔值，如果为true就说明打开了。
如果打开chrome的内容设置中的“阻止网站设置任何数据”这样我们使用上面的代码，就可以发现cookie功能关闭了，即false。这时，客户端就不会再存储任何cookie了。
实际上cookie就是一些字符串信息，这些信息放在客户端的计算机上，用于客户端计算机和服务器之间传递信息。我们可以使用 alert(typeof document.cookie) 来检测
在JavaScript中可以通过 document.cookie 来读取或设置这些信息，由于cookie 多用在客户端和服务器之间传递信息，所以除了JavaScript之外，服务器端的语言如PHP也可以存取cookie。
由于cookie最终都是以文件形式存放在客户端，所以查看和修改cookie都是十分方便的，这就是为什么常说cookie不能存放重要信息的原因。
cookie有 域和路径 这个概念。域就是domin 的概念，因为浏览器是一个主意安全的环境，所以不能域之间必然是不能互相访问cookie的(当然可以通过跨域的方式做到就向jsonp)，路径就是routing的概念，一个网页所创建的cookie只能被与这个网页在同一目录或子目录下的网页访问，而不能被其他目录下的网页访问。
cookie存在两种类型
你浏览的当前网站设置的cookie。
来自网页上嵌入广告或图片等其他域来源的第三方cookie（网站通过使用这些cookie可以跟踪你的使用信息）
Cookie的声明周期大致可以分为两种状态：
其一： 即临时性质的cookie， 当前使用的过程中网站会储存一些你的个人信息，后面就用不到了，所以浏览器关闭之后这些信息就从计算机中删除。
其二： 设置了失效时间的cookie，比如你的用户名和密码通过cookie李记录，这样就不需要每次都自己输入后登陆而是直接登陆了。 可以设置保留几天、几十天等。
Cookie的两种清除方式
浏览器自身的设置中清除
通过设置cookie的有效期
说明： 删除cookie有可能导致某些网页无法正常运行（如：我将cookie功能关闭，现在写的博文就不能正常提交）
浏览器可以通过设置接受或拒绝访问cookie，处于性能和功能的考虑，尽量降低cookie的使用数量。
假如是本地磁盘中的页面，chrome的控制台是无法用JavaScript读写操作 cookie 的，解决办法...换一个浏览器^_^。
一、 简单的存取操作
使用js存取cookie时，必须使用document的cookie属性，如下：
document.cookie = 'username=zzw';
注意： 其中username就是cookie的名称，zzw就是这个名称对应的值。 假设 cookie 名称并不存在，那么就是创建一个新的 cookie；如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ，重复使用这个方法即可。
我们还可以通过document.cookie.length来查看有多少对这样的cookie。
二、 cookie的读取操作
下面的代码是w3school上的例子
function getCookie(c_name){
if (document.cookie.length>0){ //先查询cookie是否为空，为空就return "" 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()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断 if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end)) //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节 }
}
return "" }
可以看得出来，这实际上就是对字符串进行操作。
三、设置cookie的有效期
默认情况，cookie在浏览器关闭就实效了，但是我们可以通过下面的方式来设置有效期：
document.cookie = "name=value;expires=date"
上面的data值为GMT时间（格林威治时间）的日期型字符串，生成方式如下：
var _date = new Date();
_date.setDate(_date.getDate()+30);
_data.toGMTString();
直接在本机上运行，结果是："Fri, 21 Apr 2017 19:21:11 GMT"
我们通过 +30 就可以设置cookie的有效时间是30天了。注意:setDate和getDate的使用。
默认情况下，只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问，这个是因为安全方面的考虑，造成不是所有页面都可以随意访问其他页面创建的 cookie。
如：在 "http://www.cnblogs.com/Darren_code/" 这个页面创建一个cookie，那么在"/Darren_code/"这个路径下的页面如： "http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html"这个页面默认就能取到cookie信息，因为这个页面时上面的路径的子目录下的页面。而因为"http://www.cnblogs.com"或者 "http://www.cnblogs.com/xxxx/"不是在同一个目录下，所以不能访问cookie了。
之前说到，cookie在报文和本地文件中，都可以看到，所以不能存放重要的信息，他们都是不安全的。但是cookie中传递的内容非常重要，就要用加密的方式来传输数据。
即如果把cookie的属性名称为secure，默认的值为空，那么它和服务器之间就会通过https或其他的安全协议传输数据，如下：
document.cookie = "username=zzw;secure"
值得注意的是： 这样只能保证cookie和服务器之间的数据传输是加密的，但是本地文件依旧没有加密。所以本地的cookie还是很容易看到的。
在输入cookie信息时不能包含空格、分号、逗号等特殊符号。 而在一般情况下，cookie都是采用未编码的方式。 所以，在设置cookie之前应当使用escape()函数先将cookie进行编码，在获取到cookie的时候使用unescapse（）函数把值进行转换回来。
关于如何理解客户端与服务器cookie就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网