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 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
thinkPHP查询方式小结
2016/01/09 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python递归下载文件夹下所有文件
2019/08/31 Python
查看keras的默认backend实现方式
2020/06/19 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
经济信息系毕业生自荐信范文
2014/03/15 职场文书
社会实践活动总结报告
2014/04/29 职场文书
学生鉴定评语大全
2014/05/05 职场文书
先进班组事迹材料
2014/12/25 职场文书
西安大雁塔导游词
2015/02/10 职场文书
结婚仪式主持词
2015/06/29 职场文书
浅谈Python协程asyncio
2021/06/20 Python
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android