关于document.cookie的使用javascript


Posted in Javascript onOctober 29, 2010

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 相关文章推荐
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
深入理解JavaScript定时机制
Oct 29 #Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 #Javascript
ExtJS 入门
Oct 29 #Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 #Javascript
javascript天然的迭代器
Oct 29 #Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 #Javascript
js类型检查实现代码
Oct 29 #Javascript
You might like
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
微信支付开发订单查询实例
2016/07/12 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
Node.js连接mongodb实例代码
2017/06/06 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
20个常用Python运维库和模块
2018/02/12 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Django的Modelforms用法简介
2019/07/27 Python
python中open函数的基本用法示例
2019/09/07 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
多个python文件调用logging模块报错误
2020/02/12 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
信息管理专业学生自荐信格式
2013/09/22 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
学会感恩主题班会
2015/08/12 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
《草船借箭》教学反思
2016/02/23 职场文书