资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何理解客户端与服务器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查看

我们可以使用 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上的例子

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

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的有效期

默认情况,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就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


文章标题:如何理解客户端与服务器cookie
文章地址:http://cdkjz.cn/article/pcopsp.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220