JavaScript的Cookies


Posted in Javascript onJanuary 16, 2008

使用 Cookies

我们已经知道,在 document 对象中有一个 cookie 属性。但是 Cookie 又是什么?“某些 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 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
js中数组的常用方法小结
Dec 30 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
Jquery Fade用法详解
Nov 06 jQuery
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
JavaScript中的对象化编程
Jan 16 #Javascript
JavaScript中的事件处理
Jan 16 #Javascript
JavaScript中的其他对象
Jan 16 #Javascript
JavaScript中的Document文档对象
Jan 16 #Javascript
JavaScript中的Location地址对象
Jan 16 #Javascript
JavaScript中的History历史对象
Jan 16 #Javascript
JavaScript中的Window窗口对象
Jan 16 #Javascript
You might like
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
php实现数据库的增删改查
2017/02/26 PHP
utf8的编码算法 转载
2006/12/27 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
python正则表达式之作业计算器
2016/03/18 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
python使用udp实现聊天器功能
2018/12/10 Python
Python try except else使用详解
2021/01/12 Python
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
黄金酒广告词
2014/03/21 职场文书
合作合同协议书范本
2015/01/27 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
草房子读书笔记
2015/06/29 职场文书
z-index不起作用
2021/03/31 HTML / CSS
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫