JavaScript入门教程 Cookies


Posted in Javascript onJanuary 31, 2009

某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称为 Cookie。”—— MSIE 帮助。一般来说,Cookies 是 CGI 或类似,比 HTML 高级的文件、程序等创建的,但是 JavaScript 也提供了对 Cookies 的很全面的访问权利。

在继续之前,我们先要学一学 Cookie 的基本知识。

每个 Cookie 都是这样的:<cookie名>=<值>

<cookie名>的限制与 JavaScript 的命名限制大同小异,少了“不能用 JavaScript 关键字”,多了“只能用可以用在 URL 编码中的字符”。后者比较难懂,但是只要你只用字母和数字命名,就完全没有问题了。<值>的要求也是“只能用可以用在 URL 编码中的字符”。

每个 Cookie 都有失效日期,一旦电脑的时钟过了失效日期,这个 Cookie 就会被删掉。我们不能直接删掉一个 Cookie,但是可以用设定失效日期早于现在时刻的方法来间接删掉它。

每个网页,或者说每个站点,都有它自己的 Cookies,这些 Cookies 只能由这个站点下的网页来访问,来自其他站点或同一站点下未经授权的区域的网页,是不能访问的。每一“组”Cookies 有规定的总大小(大约 2KB 每“组”),一超过最大总大小,则最早失效的 Cookie 先被删除,来让新的 Cookie“安家”。

现在我们来学习使用 document.cookie 属性。

如果直接使用 document.cookie 属性,或者说,用某种方法,例如给变量赋值,来获得 document.cookie 的值,我们就可以知道在现在的文档中有多少个 Cookies,每个 Cookies 的名字,和它的值。例如,在某文档中添加“document.write(document.cookie)”,结果显示:

name=kevin; email=kevin@kevin.com; lastvisited=index.html

这意味着,文档包含 3 个 Cookies:name, email 和 lastvisited,它们的值分别是 kevin, kevin@kevin.com 和 index.html。可以看到,两个 Cookies 之间是用分号和空格隔开的,于是我们可以用 cookieString.split('; ') 方法得到每个 Cookie 分开的一个数组(先用 var cookieString = document.cookie)。

设定一个 Cookie 的方法是对 document.cookie 赋值。与其它情况下的赋值不同,向 document.cookie 赋值不会删除掉原有的 Cookies,而只会增添 Cookies 或更改原有 Cookie。赋值的格式:

document.cookie = 'cookieName=' + escape('cookieValue') 
+ ';expires=' + expirationDateObj.toGMTString();

是不是看到头晕了呢?以上不是粗体字的地方是要照抄不误的,粗体字是要按实际情况做出改动的。cookieName 表示 Cookie 的名称,cookieValue 表示 Cookie 的值,expirationDateObj 表示储存着失效日期的日期对象名,如果不需要指定失效日期,则不需要第二行。不指定失效日期,则浏览器默认是在关闭浏览器(也就是关闭所有窗口)之后过期。

看到了上面的一些下划线了么?这些是应该注意的地方。

首先 escape() 方法:为什么一定要用?因为 Cookie 的值的要求是“只能用可以用在 URL 编码中的字符”。我们知道“escape()”方法是把字符串按 URL 编码方法来编码的,那我们只需要用一个“escape()”方法来处理输出到 Cookie 的值,用“unescape()”来处理从 Cookie 接收过来的值就万无一失了。而且这两个方法的最常用途就是处理 Cookies。其实设定一个 Cookie 只是“document.cookie = 'cookieName=cookieValue'”这么简单,但是为了避免在 cookieValue 中出现 URL 里不准出现的字符,还是用一个 escape() 好。

然后“expires”前面的分号:注意到就行了。是分号而不是其他。

最后 toGMTString() 方法:设定 Cookie 的时效日期都是用 GMT 格式的时间的,其它格式的时间是没有作用的。

现在我们来实战一下。设定一个“name=rose”的 Cookie,在 3 个月后过期。

var expires = new Date(); 
expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000); 
/* 三个月 x 一个月当作 30 天 x 一天 24 小时 
x 一小时 60 分 x 一分 60 秒 x 一秒 1000 毫秒 */ 
document.cookie = 'name=rose;expires=' + expires.toGMTString();

为什么没有用 escape() 方法?这是因为我们知道 rose 是一个合法的 URL 编码字符串,也就是说,'rose' == escape('rose')。一般来说,如果设定 Cookie 时不用 escape(),那获取 Cookie 时也不用 unescape()。

再来一次:编写一个函数,作用是查找指定 Cookie 的值。

function getCookie(cookieName) { 
var cookieString = document.cookie; 
var start = cookieString.indexOf(cookieName + '='); 
// 加上等号的原因是避免在某些 Cookie 的值里有 
// 与 cookieName 一样的字符串。 
if (start == -1) // 找不到 
return null; 
start += cookieName.length + 1; 
var end = cookieString.indexOf(';', start); 
if (end == -1) return unescape(cookieString.substring(start)); 
return unescape(cookieString.substring(start, end)); 
}

这个函数用到了字符串对象的一些方法,如果你不记得了(你是不是这般没记性啊),请快去查查。这个函数所有的 if 语句都没有带上 else,这是因为如果条件成立,程序运行的都是 return 语句,在函数里碰上 return,就会终止运行,所以不加 else 也没问题。该函数在找到 Cookie 时,就会返回 Cookie 的值,否则返回“null”。

现在我们要删除刚才设定的 name=rose Cookie。

var expires = new Date(); 
expires.setTime(expires.getTime() - 1); 
document.cookie = 'name=rose;expires=' + expires.toGMTString();

可以看到,只需要把失效日期改成比现在日期早一点(这里是早 1 毫秒),再用同样的方法设定 Cookie,就可以删掉 Cookie 了。
Javascript 相关文章推荐
js 图片轮播(5张图片)
Dec 30 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
Node.js文件操作详解
Aug 16 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 #Javascript
JavaScript入门教程(11) js事件处理
Jan 31 #Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 #Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 #Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 #Javascript
JavaScript入门教程(7) History历史对象
Jan 31 #Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 #Javascript
You might like
linux下为php添加curl扩展的方法
2011/07/29 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php数组合并的二种方法
2014/03/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
javascript 简练的几个函数
2009/08/29 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
python类参数self使用示例
2014/02/17 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
python实现视频压缩功能
2020/12/18 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
怎样自定义一个异常类
2016/09/27 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
项目建议书模板
2014/05/12 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
维稳工作情况汇报
2014/10/27 职场文书
写给父母的感谢信
2015/01/22 职场文书
蓬莱阁导游词
2015/02/04 职场文书
教师聘用意向书
2015/05/11 职场文书
在校生证明
2015/06/17 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript
instantclient客户端 连接oracle数据库
2022/04/26 Oracle