求知 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
 
追随技术信仰

随时听讲座
每天看新闻
 
 

Javascript教程
Javascript语法
在浏览器启用Javascript
在HTML中配置Javascript
Javascript变量和数据类型
Javascript运算符
Javascript if...else 语句
Javascript Switch Case
Javascript while循环
Javascript for循环
Javascript for...in循环
Javascript循环控制
Javascript函数
Javascript事件
Javascript Cookies
Javascript页面重定向
Javascript对话框
Javascript void关键词
Javascript页面打印
Javascript对象
Javascript Number对象
Javascript Boolean对象
Javascript String对象
Javascript Arrays对象
Javascript Date对象
Javascript Math对象
正则表达式和RegExp对象
Javascript文档处理模型
Javascript错误和异常处理
Javascript表单验证
Javascript动画
 
 

JavaScript Cookies
27 次浏览
5次  
 捐助

Cookies是什么 ?

Web浏览器和服务器使用HTTP协议进行通信,并且HTTP是一种无状态协议。但对于一个商业网站它需要保持不同的页面间的会话信息。例如在完成多页后,一个用户注册结束。但是,如何保持所有网页用户的会话信息。

在许多情况下,使用Cookie来记忆和跟踪的喜好,采购,佣金,并要求更好的访问体验或网站的统计数据等信息的最有效的方法。

它是如何工作的 ?

服务器发送一些数据到访问者的浏览器以cookie的形式。该浏览器可以接受cookie。如果是这样,它是为访问者存储在硬盘驱动器上的一个纯文本的记录。现在,当访问者到达您的网站其他页面,浏览器发送相同cookie到服务器进行检索。一旦检索到,服务器知道/记得刚才发生了什么存储。

Cookies有5个可变长度字段的纯文本数据记录:

Expires : cookie将过期的日期。如果这是空白的,那么就是当访问者退出浏览器cookie将到期。

Domain : 网站的域名。

Path : 路径设置 cookie 目录或网页。如果想要从任何目录或页面,那么cookie 是空的。

Secure : 如果该字段包含“安全”二字,那么cookie仅可检索到一个安全的服务器。如果该字段为空,没有限制存在。

Name=Value : Cookie设置在键和值对的形式来获取。

的Cookie最初设计用于CGI编程和cookies的数据是在Web浏览器和Web服务器之间自动传输的,所以在服务器上的CGI脚本可以读取和写入存储在客户端上的cookie的值。

JavaScript的也可以操作使用文档对象的cookie属性。 JavaScript可以读取,创建,修改和删除适用于当前网页的cookie或Cookies。

储存Cookies:

创建一个cookie的最简单的方法是一个字符串值分配到document.cookie对象,它是这样的:

语法

document.cookie = "key1=value1;key2=value2;expires=date";  

在这里,expires属性选项。如果提供这个属性有一个有效的日期或时间,那么cookie将在给定的日期或时间满期,而后cookies的值将无法访问到。

注意:Cookie的值可能不包括分号,逗号或空白。出于这个原因,可能需要使用JavaScript 的 escape()函数将其存储的值在cookie之前进行编码。如果这样做,当读取cookie的值时也必须使用相应的unescape()函数。

例子:

下面是示例,设置在输入客户名称在cookie。

<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
   if( document.myform.customer.value == "" ){
      alert("Enter some value!");
      return;
   }

   cookievalue= escape(document.myform.customer.value) + ";";
   document.cookie="name=" + cookievalue;
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html> 

这将产生以下结果。现在进入一些在文本框中,然后按下按钮“Set Cookie”设置cookie。


                                Enter name: 
                                
                                 
                                
                                 
                              

现在,有一个cookie叫name。可以设置使用由逗号分隔multiplekey= value对应多个cookie。

你将在下一节学习如何读取该cookie。

读取Cookies:

读取cookie和写入一样简单,因为 document.cookieobject 的值是cookie。所以每当要访问cookie,可以使用这个字符串。

该字符串 document.cookie将继续由分号,其中name是一个cookie的名称,值是它的字符串值分隔的名称=值对的列表。

您可以使用字符串split()函数来打破串入键和值如下:

例子:

下面是一个例子,以获得上一节设置的cookie。

<html> 
<head> 
<script type="text/javascript"> 
<!--
function ReadCookie()
{
   var allcookies = document.cookie;
   alert("All Cookies : " + allcookies );

   // Get all the cookies pairs in an array
   cookiearray  = allcookies.split(';');

   // Now take key value pair out of this array
   for(var i=0; i<cookiearray.length; i++){
      name = cookiearray[i].split('=')[0];
      value = cookiearray[i].split('=')[1];
      alert("Key is : " + name + " and Value is : " + value);
   }
}
//--> 
</script> 
</head> 
<body> 
<form name="myform" action=""> 
<input type="button" value="Get Cookie" onclick="ReadCookie()"/> 
</form> 
</body> 
</html> 

注:这里的length 是Array类的方法,该方法返回一个数组的长度。我们将在一个单独的章节讨论数组。到那个时候,请尽量消化它。

这将产生以下结果。现在按按钮“Get Cookie”,看看在上一节中如何设置cookie。


                                
                      
                          

注意:有可能在机器上已设置了一些其他的Cookie。所以,上面的代码会显示所有设置cookie。

设置Cookies的过期日期:

可以通过设置的到期日期和保存cookie中的失效日期延长超出当前浏览器会话cookie中的寿命。这可以通过设置expires属性的日期和时间来完成。

例子:

下面的例子演示了如何设置cookie1个月后过期:

<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
   var now = new Date();
   now.setMonth( now.getMonth() + 1 ); 
   cookievalue = escape(document.myform.customer.value) + ";"
   document.cookie="name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

删除Cookie:

有时如果想删除一个cookie,以便后续尝试读取cookie返回什么。要做到这一点,你只需要在到期日设置在过去的某个时间。

例子:

下面的例子演示了如何通过设置有效期限一个月以前删除cookie:

<html> 
<head> 
<script type="text/javascript"> 
<!--
function WriteCookie()
{
   var now = new Date();
   now.setMonth( now.getMonth() - 1 ); 
   cookievalue = escape(document.myform.customer.value) + ";"
   document.cookie="name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//--> 
</script> 
</head> 
<body> 
<form name="formname" action=""> 
Enter name: <input type="text" name="customer"/> 
<input type="button" value="Set Cookie" onclick="WriteCookie()"/> 
</form> 
</body> 
</html> 

注:不设置日期,可以使用setTime()函数看到新值。

 


您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码: 验证码,看不清楚?请点击刷新验证码 必填



27 次浏览
5次
 捐助
 


每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号