JavaScript操作Cookie详解


Posted in Javascript onFebruary 28, 2015

什么是 Cookie

“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” - w3school

cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息。

从JavaScript的角度看,cookie 就是一些字符串信息。这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息。

在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信,所以除了JavaScript以外,服务端的语言(如PHP)也可以存取 cookie。

Cookie 基础知识

cookie 是有大小限制的,每个 cookie 所存放的数据不能超过4kb,如果 cookie 字符串的长度超过4kb,则该属性将返回空字符串。

由于 cookie 最终都是以文件形式存放在客户端计算机中,所以查看和修改 cookie 都是很方便的,这就是为什么常说 cookie 不能存放重要信息的原因。

每个 cookie 的格式都是这样的:<cookie名>=<值>;名称和值都必须是合法的标示符。

cookie 是存在 有效期的。在默认情况下,一个 cookie 的生命周期就是在浏览器关闭的时候结束。如果想要 cookie 能在浏览器关掉之后还可以使用,就必须要为该 cookie 设置有效期,也就是 cookie 的失效日期。

alert(typeof document.cookie)

结果是 string,曾经我以为是array,还闹过笑话…??/p>

cookie 有域和路径这个概念。域就是domain的概念,因为浏览器是个注意安全的环境,所以不同的域 之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念,一个网页所创建的 cookie 只能被与这个网页在同一目录或子目录下得所有网页访问,而不能被其他目录下得网页访问(这句话有点绕,一会看个例子就好理解了)。

其实创建cookie的方式和定义变量的方式有些相似,都需要使用 cookie 名称和 cookie 值。同个网站可以创建多个 cookie ,而多个 cookie 可以存放在同一个cookie 文件中。

Cookie常见问题

cookie 存在两种类型:

你浏览的当前网站本身设置的 cookie

来自在网页上嵌入广告或图片等其他域来源的 第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)

刚刚基础知识里面有说到 cookie 生命周期的问题,其实 cookie 大致可分为两种状态:

临时性质的cookie。当前使用的过程中网站会储存一些你的个人信息,当浏览器关闭后这些信息也会从计算机中删除

设置失效时间的cookie。就算浏览器关闭了,这些信息业依然会在计算机中。如 登录名称和密码,这样无须在每次到特定站点时都进行登录。这种cookie 可在计算机中保留几天、几个月甚至几年

cookie 有两种清除方式:

通过浏览器工具清除 cookie (有第三方的工具,浏览器自身也有这种功能)

通过设置 cookie 的有效期来清除 cookie

注:删除 cookie 有时可能导致某些网页无法正常运行

浏览器可以通过设置来接受和拒绝访问 cookie。

出于功能和性能的原因考虑,建议尽量降低 cookie 的使用数量,并且要尽量使用小 cookie。

关于cookie编码的细节问题将会在cookie高级篇中单独介绍。

假如是本地磁盘中的页面,chrome的控制台是无法用JavaScript读写操作 cookie 的,解决办法…换一个浏览器^_^。

Cookie基础用法

一.简单的存取操作

在使用JavaScript存取 cookie 时,必须要使用Document对象的 cookie 属性;一行代码介绍如何创建和修改一个 cookie :

document.cookie  = 'username=Darren';

以上代码中'username'表示 cookie 名称,'Darren'表示这个名称对应的值。假设 cookie 名称并不存在,那么就是创建一个新的 cookie;如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ,重复使用这个方法即可。

二.cookie的读取操作

要精确的对 cookie 进行读取其实很简单,就是对字符串进行操作。从w3school上copy这段代码来做分析:

function getCookie(c_name){

if (document.cookie.length>0){
//先查询cookie是否为空,为空就return ""



c_start=document.cookie.indexOf(c_name + "=")
//通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1




if (c_start!=-1){ 




c_start=c_start + c_name.length+1
//最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置




c_end=document.cookie.indexOf(";",c_start)
//其实我刚看见indexOf()第二个参数的时候猛然有点晕,后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项,所以通过";"号是否存在来判断




if (c_end==-1) c_end=document.cookie.length





return unescape(document.cookie.substring(c_start,c_end))
//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础,想了解的可以搜索下,在文章结尾处也会进行讲解cookie编码细节



} 


}


return ""

}
 

当然想实现读取cookie的方法还有不少,比如数组,正则等,这里就不往细说了。

三.设置cookie的有效期

文章中常常出现的 cookie 的生命周期也就是有效期和失效期,即 cookie 的存在时间。在默认的情况下,cookie 会在浏览器关闭的时候自动清除,但是我们可以通过expires来设置 cookie 的有效期。语法如下:

document.cookie = "name=value;expires=date";

上面代码中的date值为GMT(格林威治时间)格式的日期型字符串,生成方式如下:
var _date = new Date();

_date.setDate(_date.getDate()+30);

_date.toGMTString();

上面三行代码分解为几步来看:

通过new生成一个Date的实例,得到当前的时间;

getDate()方法得到当前本地月份中的某一天,接着加上30就是我希望这个cookie能过在本地保存30天;

接着通过setDate()方法来设置时间;

最后 用toGMTString()方法把Date对象转换为字符串,并返回结果

通过下面这个完整的函数来说明在创建 cookie 的过程中我们需要注意的地方 ? 从w3school复制下来的。创建一个在 cookie 中存储信息的函数:

function setCookie(c_name, value, expiredays){

    var exdate=new Date();

    exdate.setDate(exdate.getDate() + expiredays);

    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

}

//使用方法:setCookie('username','Darren',30)   

现在我们这个函数是按照天数来设置cookie的有效时间,如果想以其他单位(如:小时)来设置,那么改变第三行代码即可:

exdate.setHours(exdate.getHours() + expiredays);

这样设置以后的cookie有效期就是按照小时为单位的。

常见问题中有提到清除 cookie 的两种方法,现在要说的是使 cookie 失效,通过把有效期的时间设置为一个已过期的时间。既然已经有了设置有效期的方法,那么设置失效期的方法就请感兴趣的朋友自己动手了^_^。下面继续比较深的cookie话题。

Cookie 高级篇

一.cookie 路径概念

在基础知识中有提到 cookie 有域和路径的概念,现在来介绍路径在 cookie 中的作用。

cookie 一般都是由于用户访问页面而被创建的,可是并不是只有在创建 cookie 的页面才可以访问这个 cookie。

默认情况下,只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问,这个是因为安全方面的考虑,造成不是所有页面都可以随意访问其他页面创建的 cookie。举个例子:

在 “https://3water.com/Darren_code/” 这个页面创建一个cookie,那么在”/Darren_code/”这个路径下的页面如: “https://3water.com/Darren_code/archive/2011/11/07/Cookie.html”这个页面默 认就能取到cookie信息。

可在默认情况下, “https://3water.com”或者 “https://3water.com/xxxx/” 就不可以访问这个 cookie(光看没用,实践出真理^_^)。

那么如何让这个 cookie 能被其他目录或者父级的目录访问类,通过设置 cookie 的路径就可以实现。例子如下:

document.cookie = "name=value;path=path"

document.cookie = "name=value;expires=date;path=path"

红色字体path就是 cookie 的路径,最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie,所有的页面都可以访问到了:
document.cookie = "name=Darren;path=/";

二.cookie 域概念

路径能解决在同一个域下访问 cookie 的问题,咱们接着说 cookie 实现同域之间访问的问题。语法如下:

document.cookie = "name=value;path=path;domain=domain";

红色的domain就是设置的 cookie 域的值。

例如 ”www.qq.com” 与 “sports.qq.com” 公用一个关联的域名”qq.com”,我们如果想让 “sports.qq.com” 下的cookie被 ”www.qq.com” 访问,我们就需要用到 cookie 的domain属性,并且需要把path属性设置为 “/”。例:

document.cookie = "username=Darren;path=/;domain=qq.com";

注:一定的是同域之间的访问,不能把domain的值设置成非主域的域名。

三.cookie 安全性

通常 cookie 信息都是使用HTTP连接传递数据,这种传递方式很容易被查看,所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要,那么就要求使用加密的数据传输。

所以 cookie 的这个属性的名称是“secure”,默认的值为空。如果一个 cookie 的属性为secure,那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下:

document.cookie = "username=Darren;secure"

把cookie设置为secure,只保证 cookie 与服务器之间的数据传输过程加密,而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密,得自己加密数据。

注:就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息,所以说到底,别把重要信息放cookie就对了,?濉?/p>

四.cookie 编码细节

原本来想在常见问题那段介绍cookie编码的知识,因为如果对这个不了解的话编码问题确实是一个坑,所以还是详细说说。

在输入cookie信息时不能包含空格,分号,逗号等特殊符号,而在一般情况下,cookie 信息的存储都是采用未编码的方式。所以,在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码,在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时:

document.cookie = name + "="+ escape (value);

再看看基础用法时提到过的getCookie()内的一句:
return unescape(document.cookie.substring(c_start,c_end));

这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。

个人代码

/*设置Cookie*/
function setCookie(c_name, value, expiredays, path, domain, secure) { 

 var exdate = new Date(); //获取当前时间 

 exdate.setDate(exdate.getDate() + expiredays);  //过期时间


 document.cookie = c_name + "=" + //cookie名称

 escape(value) + //将cookie值进行编码

 ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + //设置过期时间

 ((path == null) ? '/' : ';path=' + path) + //设置访问路径

 ((domain == null) ? '' : ';domain=' + domain) + //设置访问域

 ((secure == null) ? '' : ';secure=' + secure);  //设置是否加密

};

setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);

setCookie('bb', 'name=sheng;sex=men', 30);
/*获取Cookie*/
function getCookie(c_name, index) {

 var cookies = document.cookie; //获取cookie值

 var cookieLen = cookies.length; //获取cookie长度

 if (cookieLen > 0) { //cookie不为空时
  var c_start = cookies.indexOf(c_name + '='); //查找需要cookie值在cookie中序号

  if (c_start > -1) { //cookie值存在时

   c_start += c_name.length + 1; //获取cookie值开始序列号
   var c_end = cookies.indexOf(';', c_start); //获取cookie值结束序列号

   if (c_end == -1) { //当cookie是最后一个时

    c_end = cookieLen; //设置cookie值结束序列号为cookie长度

   };
   var cookieStr = unescape(cookies.substring(c_start, c_end)); //获取解码cookie值
   var cookieObj = cookieStr.split(';'); //分割cookie值
   index = ((index == null) ? 0 : index); //判断index是否传值
   var goalObj = cookieObj[index]; //索引数组

   var goalStr = goalObj.split('=');

   var getcook = goalStr[1]; //获取需要取的cookie值

   return getcook;

  };

 } else {

  console.log('页面没有cookie');

 }

};
alert(getCookie('test', 0)); //打印查询cookie值
Javascript 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
js动态设置div的值下例子
Oct 29 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
js验证账户名是否重复
May 26 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 #Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 #Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 #Javascript
浅谈JavaScript数据类型及转换
Feb 28 #Javascript
javaScript基础语法介绍
Feb 28 #Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 #Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 #Javascript
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
Python 12306抢火车票脚本
2018/02/07 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
在pycharm中显示python画的图方法
2019/08/31 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
python__new__内置静态方法使用解析
2020/01/07 Python
python对Excel的读取的示例代码
2020/02/14 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
大学在校生求职信范文
2013/11/21 职场文书
《秋游》教学反思
2014/04/24 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
给医院的感谢信
2015/01/21 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
MySQL笔记 —SQL运算符
2022/01/18 MySQL