关于document.cookie的使用javascript


Posted in Javascript onApril 11, 2008

document.cookie="userId=828";
如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:
document.cookie="userId=828; userName=hulk";
在cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。在cookie的名中做

到这点很容易,但要保存的值是不确定的。如何来存储这些值呢?方法是用escape()函数进行编

码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储于

cookie值中,而且使用此种方案还可以避免中文乱码的出现。例如:
document.cookie="str="+escape("I love ajax");
相当于:
document.cookie="str=I%20love%20ajax";
当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值,

这在前面已经介绍过。
尽管document.cookie看上去就像一个属性,可以赋不同的值。但它和一般的属性不一样,改变

它的赋值并不意味着丢失原来的值,例如连续执行下面两条语句:
document.cookie="userId=828";
document.cookie="userName=hulk";
这时浏览器将维护两个cookie,分别是userId和userName,因此给document.cookie赋值更像执

行类似这样的语句:
document.addCookie("userId=828");
document.addCookie("userName=hulk");
事实上,浏览器就是按照这样的方式来设置cookie的,如果要改变一个cookie的值,只需重新赋

值,例如:
document.cookie="userId=929";
这样就将名为userId的cookie值设置为了929。

获取cookie的值
下面介绍如何获取cookie的值。cookie的值可以由document.cookie直接获得:
var strCookie=document.cookie;
这将获得以分号隔开的多个名/值对所组成的字符串,这些名/值对包括了该域名下的所有cookie

。例如:

图7.1显示了输出的cookie值。由此可见,只能够一次获取所有的cookie值,而不能指定cookie

名称来获得指定的值,这正是处理cookie值最麻烦的一部分。用户必须自己分析这个字符串,来

获取指定的cookie值,例如,要获取userId的值,可以这样实现:

这样就得到了单个cookie的值

用类似的方法,可以获取一个或多个cookie的值,其主要的技巧仍然是字符串和数组的相关操作。

给cookie设置终止日期
到现在为止,所有的cookie都是单会话cookie,即浏览器关闭后这些cookie将会丢失,事实上这

些cookie仅仅是存储在内存中,而没有建立相应的硬盘文件。
在实际开发中,cookie常常需要长期保存,例如保存用户登录的状态。这可以用下面的选项来实

现:
document.cookie="userId=828; expires=GMT_String";
其中GMT_String是以GMT格式表示的时间字符串,这条语句就是将userId这个cookie设置为

GMT_String表示的过期时间,超过这个时间,cookie将消失,不可访问。例如:如果要将cookie

设置为10天后过期,可以这样实现:

删除cookie
为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:

指定可访问cookie的路径
默认情况下,如果在某个页面创建了一个cookie,那么该页面所在目录中的其他页面也可以访问

该cookie。如果这个目录下还有子目录,则在子目录中也可以访问。例如在

www.xxxx.com/html/a.html中所创建的cookie,可以被www.xxxx.com/html/b.html或

www.xxx.com/ html/ some/c.html所访问,但不能被www.xxxx.com/d.html访问。
为了控制cookie可以访问的目录,需要使用path参数设置cookie,语法如下:
document.cookie="name=value; path=cookieDir";
其中cookieDir表示可访问cookie的目录。例如:
document.cookie="userId=320; path=/shop";
就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用,可以将cookie_dir指定为根目录,例如:
document.cookie="userId=320; path=/";

指定可访问cookie的主机名
和路径类似,主机名是指同一个域下的不同主机,例如:www.google.com和gmail.google.com就

是两个不同的主机名。默认情况下,一个主机中创建的cookie在另一个主机下是不能被访问的,

但可以通过domain参数来实现对其的控制,其语法格式为:
document.cookie="name=value; domain=cookieDomain";
以google为例,要实现跨主机访问,可以写为:
document.cookie="name=value;domain=.google.com";
这样,所有google.com下的主机都可以访问该cookie。

综合示例:构造通用的cookie处理函数
cookie的处理过程比较复杂,并具有一定的相似性。因此可以定义几个函数来完成cookie的通用

操作,从而实现代码的复用。下面列出了常用的cookie操作及其函数实现。
1.添加一个cookie:addCookie(name,value,expiresHours)
该函数接收3个参数:cookie名称,cookie值,以及在多少小时后过期。这里约定expiresHours为

0时不设定过期时间,即当浏览器关闭时cookie自动消失。该函数实现如下:

2.获取指定名称的cookie值:getCookie(name)
该函数返回名称为name的cookie值,如果不存在则返回空,其实现如下:

3.删除指定名称的cookie:deleteCookie(name)
该函数可以删除指定名称的cookie

Javascript 相关文章推荐
js鼠标左右键 键盘值小结
Jun 11 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
javascript比较文档位置
Apr 08 #Javascript
js函数般调用正则
Apr 08 #Javascript
javascript背投广告代码的完善
Apr 08 #Javascript
大家未必知道的Js技巧收藏
Apr 07 #Javascript
用JavaScript调用WebService的示例
Apr 07 #Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 #Javascript
javascript add event remove event
Apr 07 #Javascript
You might like
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
深入理解Python对Json的解析
2017/02/14 Python
Python实现括号匹配方法详解
2020/02/10 Python
Python chardet库识别编码原理解析
2020/02/18 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
Jar包的作用是什么
2014/03/30 面试题
环境科学专业个人求职信
2013/09/26 职场文书
关于打架的检讨书
2014/01/17 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
合伙协议书范本
2014/04/21 职场文书
实践单位评语
2014/04/26 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
小学领导班子对照材料
2014/08/23 职场文书
公司给客户的感谢信
2015/01/23 职场文书
环境建议书
2015/02/04 职场文书
党支部季度考核意见
2015/06/02 职场文书
运动员加油词
2015/07/18 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB