使用JavaScript操作cookies

一、什么是cookies？

　　cookies是一种对客户端硬盘的数据进行存取的技术，这种技术能够让网站把少量的数据存储到客户端的硬盘，同时也能够从客户端的硬盘读取存储的数据。存储的方式表现为一个很小的文本文件，这个文件可以存储的东西很多，比如：用户名、访问时间、密码等。

二、使用cookies

1、cookies的创建

document.cookies = name+"="+value;

　　cookies的创建需要给出cookies的名称和对应的cookies值，必备属性是cookies的名称name，除此之外，cookies还有四个另外的可选属性，分别是：expires属性、path属性、domain属性、secure属性。

2、给cookies命名

　　name属性是用来唯一表示cookies的，cookies的name属性可以自定义。与其他属性不同，document对象的cookies属性赋值时，并不会替代原来的值，而是会创建新的cookies。

eg：

 document.cookies = "user=Tom";

 document.cookies = "city=nanjing";

 document.cookies = "age=20";

　　上面的三条语句，创建了三个cookies。创建多个cookies时可以用一条语句，中间用分号隔开即可。

　　因为cookies是通过HTTP来传递的，而HTTP不允许某个非字母和数字的字符被传递，因此cookies不能包含分号等特殊字符。为了解决这个问题，可以采用对cookies的名称和值在赋值前进行编码的方法。在JavaScript中，常用的编码方法是escape(),为了在读取的时候解码，相对应的一个解码方法是unescape().例如：

document.cookies = escape("user=Tom;city=nanjing;age=20");

3、定义cookies过期时间（expires属性）
　　（1）cookies是有生命周期的，为了能够让一个cookies能够在关闭浏览器后还能持续生效，就需要使用expires属性。expires需要使用格林尼治标准时间的文本字符串，格式如下：

Weekday Mon DD HH:MM:SS Time Zone YYYY

eg:

Mon Oct 22 13:22:34 PST 2012

　　（2）为了更好的控制时间，通常使用JavaScript的Date对象来进行时间的设置（这里就不列举Date对象的常用方法了，之前的学习中有详细的资料）
eg：

 <script language="JavaScript">

     var edate = new Date();

     document.cookies = escape("user=Tom;expire="+edate.setFullYear(edate.getFullYear()+1));

 </script>

　　以上代码，设置了过期时间为当前时间加一年。要想让一个cookies删除，通常也是使用expires属性设置为过去的某一个时间即可。例如：

 <script language="JavaScript">

     var edate = new Date();

     document.cookies = escape("user=Tom;expire="+edate.setFullYear(edate.getFullYear()-1));

 </script>

4、定义cookies的目录范围（path属性）

　　和变量的作用域一样，cookies一样有着自己的作用范围。path属性能使cookies能够被服务器上指定目录下的所有网站访问。

eg：cookies能够被服务器里www目录及其子目录下的任何网页访问到：

document.cookies = "user=Tom;path=/www";

　　如果cookies 能够被服务器上所有网页访问：

document.cookies = "user=Tom;path=/";

5、实现跨服务器共享（domain属性）

　　domain属性能够实现跨服务器的共享。比如对于某个网站的主站www.ds5u.com是一台服务器，但是其论坛站bbs.ds5u.com又是另一个服务器，博客站blog.ds5u.com又是另一台服务器。虽然这些网站都有各自的二级域名，但是用户是同一的，需要实现cookies的共享。例如：

document.cookies = "user=Tom;domain=.ds5u.com";

　　上述代码即可实现cookies在ds5u.com这个域所在的所有服务器共享。

6、使信息传输更加安全（secure属性）

　　secure属性规定cookies只能在安全的Internet上连接。通常情况下，此属性是忽略的，属性的可选值是true和false。

eg：

document.cookies = "user=Tom;secure=true";

三、让cookies存储信息

　　cookies 本身的使用是有限制的，在用户的计算机上，每个服务器或域只能保存最多20个cookies，而每个浏览器的cookies总数不能超过300，cookies的最大尺寸的4k，因此不能像使用变量一样，随意的创建cookies。考虑到cookies的限制，最有效的方法是将所有需要保存到cookies中的值链接为一个字串（使用分隔符分隔），然后把这个字串赋值给一个cookies。这样，只需要创建一个cookies，就能保存若干的信息了。读取时，按照分隔符的组合规则进行信息的提取和还原。

　　语法：

名称1=值1&名称2=值2&...&名称n=值n

　eg：如果要保存姓名、年龄、性别、城市、邮编这五个消息，先将消息组合成一个字串：

user=Tom&age=25&sex=male&city=nanjing&zip=210000

　　然后创建一个cookies，因为字串中包含非字母和数字字符，因此在赋值前先进行编码：

document.cookie = "allinfo="+escape("user=Tom&age=25&sex=male&city=nanjing&zip=210000");

四、从cookies读取信息

　　创建cookies后，读取cookies信息直接访问属性即可：

document.cookie

document.cookie通常需要用unescape()方法进行解码，eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 <script language="JavaScript">

     document.cookie = escape("user=Tom;city=nanjing;zip=21000");

     alert("cookies的值："+unescape(document.cookie));

 </script>

 </head>

 <body>

 </body>

 </html>

　　效果：

　　在这里得到的值是一个用分号分隔的字符串。可以通过String对象来获得每个cookies对应的值。eg：

　　　　*split():将字符串按照指定的分隔符分成数组。

　　　　*substring(starting index,ending index):提取从starting index开始到ending index结束的文本。

　　　　*indexOf(text,index):返回text参数内的第一个字符在字符串的位置。

eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>读取cookies</title>

 </head>

 <script language="JavaScript">

     <!--

     document.cookie = escape("username=tom;city=nanjing;zip=210000");

     var allCookies = unescape(document.cookie);

     var aryCookies = allCookies.split(";");

     var nowvalue;

     for( var i=0; i < aryCookies.length; i++ ){

         nowvalue = aryCookies[i];

         if( nowvalue.substring( 0, nowvalue.indexOf("=") ) == "zip" ){

             document.write("cookies中保存的邮编是："+nowvalue.substring( nowvalue.indexOf("=")+1, nowvalue.length));

             alert("cookies中保存的邮编是："+nowvalue.substring( nowvalue.indexOf("=")+1, nowvalue.length));

             break;

         }

     }

     //-->

 </script>

 <body>

 </body>

 </html>

　　效果：（只能在IE中显示）

五、实践

eg：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS</title>

 <script language="JavaScript">

     function getCookie(c_name) {

         if (document.cookie.length>0) {

             c_start=document.cookie.indexOf(c_name + "=")

             if (c_start!=-1) {

                 c_start=c_start + c_name.length+1

                 c_end=document.cookie.indexOf(";",c_start)

                 if (c_end==-1) c_end=document.cookie.length

                     return unescape(document.cookie.substring(c_start,c_end))

             }

         }

         return ""

     }

     function setCookie(c_name,value,expiredays) {

         var exdate=new Date()

         exdate.setDate(exdate.getDate()+expiredays)

         document.cookie=c_name+ "=" +escape(value)+

         ((expiredays==null) ? "" : "; expires="+exdate.toGMTString())

     }

     function checkCookie() {

         username=getCookie('username')

         if (username!=null && username!="") {

             alert('Welcome again '+username+'!')}

         else {

             username=prompt('Please enter your name:',"")

             if (username!=null && username!="") {

                 setCookie('username',username,365)

             }

         }

     }

 </script>

 </head>

 <body onLoad="checkCookie()">

 </body>

 </html>

效果：

JavaScript学习之cookies的更多相关文章

  1. JavaScript学习08 Cookie对象

    JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...

  2. JavaScript学习基础部分

    JavaScript学习基础 一.简介 1.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer. Mozilla.Firefo ...

  3. JavaScript学习总结-技巧、有用函数、简洁方法、编程细节

    整理JavaScript方面的一些技巧.比較有用的函数,常见功能实现方法,仅作參考 变量转换 //edit http://www.lai18.com var myVar = "3.14159 ...

  4. javascript学习路线图

    史上最全的javascript学习路线图 JavaSctipt学习路线 完成整个课程大纲需要花上6~8周的时间,将学会完整的JavaScript语言(包括jQuery和一些HTML5).如果你没有时间 ...

  5. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  6. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  7. JavaScript学习（3）：函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  8. JavaScript学习（2）：对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  9. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

随机推荐

  1. C#的泛型委托Predicate/Func/Action（转）

    Predicate 泛型委托:表示定义一组条件并确定指定对象是否符合这些条件的方法.此委托由 Array 和 List 类的几种方法使用,用于在集合中搜索元素. 类型参数介绍:    T: 要比较的对 ...

  2. 转：给自己TopCoder SRM的建议

    强哥写的. 原文链接 1. 是否需要 long long 2. 是否有 除0 的可能 3. 是否需要cmp特判精度 4. 是否必须使用double,能转化成整数运算么?怎么转换 5. 关键部分无序的问 ...

  3. jquery and jquery validation 常见问题解决

    Cannot read property 'settings' of undefined jquery validation 这个问题常常发生在动态添加rule的时候. 解决方法 // 在timeou ...

  4. java 实现数据结构之队列

    队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,只允许在表的后端(rear)进行插入操作. 1.队列的顺序存储结构及实现 public class SequenceQueue&l ...

  5. Oracle--10(ROW_NUMBER() OVER)

    一.定义 语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这 ...

  6. Java中实现文件上传下载的三种解决方案

    第一点:Java代码实现文件上传 FormFile file=manform.getFile(); String newfileName = null; String newpathname=null ...

  7. Configuration of OpenCV2.1.0 with VS2010

    Add in the system Path: C:\Program Files (x86)\OpenCV-2.1.0\build\bin\Debug Project->Project Prop ...

  8. python 面向对象的三大特征之 继承

    #继承 #object 基类,是python定义的所有类的父类 #经典类:不继承object的类称作经典类 #新式类:继承object的类称作新式类 #python 3.x统一为新式类 #经典类是类对 ...

  9. mysqld服务器如何查看使用变量的值

    你能用这个命令得到mysqld服务器缺省缓冲区大小: shell> mysqld --help 这个命令生成一张所有mysqld选项和可配置变量的表.输出包括缺省值并且看上去象这样一些东西: P ...

  10. 学习SSH框架

    1.SSH框架的认知 在做相关的java的网页的开发制作时,良好的层次分解是十分有比要的,所以我们在云涌第三方的框架之下来简化还有名了我们相关的网站的开发. SSH框架实则为Struct + spri ...