如何理解客户端与服务器cookie

这篇文章给大家介绍如何理解客户端与服务器cookie，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

认识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设置有效期，也就是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的一些限制 

　　cookie有 域和路径 这个概念。域就是domin 的概念，因为浏览器是一个主意安全的环境，所以不能域之间必然是不能互相访问cookie的(当然可以通过跨域的方式做到就向jsonp)，路径就是routing的概念，一个网页所创建的cookie只能被与这个网页在同一目录或子目录下的网页访问，而不能被其他目录下的网页访问。

第四部分： Cookie常见问题

cookie存在两种类型

• 你浏览的当前网站设置的cookie。

• 来自网页上嵌入广告或图片等其他域来源的第三方cookie（网站通过使用这些cookie可以跟踪你的使用信息）　　

Cookie的声明周期大致可以分为两种状态：

• 其一： 即临时性质的cookie， 当前使用的过程中网站会储存一些你的个人信息，后面就用不到了，所以浏览器关闭之后这些信息就从计算机中删除。

• 其二： 设置了失效时间的cookie，比如你的用户名和密码通过cookie李记录，这样就不需要每次都自己输入后登陆而是直接登陆了。 可以设置保留几天、几十天等。

Cookie的两种清除方式

• 浏览器自身的设置中清除

• 通过设置cookie的有效期

• 说明： 删除cookie有可能导致某些网页无法正常运行（如：我将cookie功能关闭，现在写的博文就不能正常提交）

浏览器可以通过设置接受或拒绝访问cookie，处于性能和功能的考虑，尽量降低cookie的使用数量。

假如是本地磁盘中的页面，chrome的控制台是无法用JavaScript读写操作 cookie 的，解决办法...换一个浏览器^_^。

第五部分： 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 的页面在同一个目录或子目录下的网页才可以访问，这个是因为安全方面的考虑，造成不是所有页面都可以随意访问其他页面创建的 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中传递的内容非常重要，就要用加密的方式来传输数据。 

　　即如果把cookie的属性名称为secure，默认的值为空，那么它和服务器之间就会通过https或其他的安全协议传输数据，如下：

document.cookie = "username=zzw;secure"

 值得注意的是： 这样只能保证cookie和服务器之间的数据传输是加密的，但是本地文件依旧没有加密。所以本地的cookie还是很容易看到的。

第八部分： cookie编码细节

　　在输入cookie信息时不能包含空格、分号、逗号等特殊符号。 而在一般情况下，cookie都是采用未编码的方式。 所以，在设置cookie之前应当使用escape()函数先将cookie进行编码，在获取到cookie的时候使用unescapse（）函数把值进行转换回来。

关于如何理解客户端与服务器cookie就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。