必威体育Betway必威体育官网
当前位置:首页 > IT技术

关于js操作cookie

时间:2019-08-18 22:45:27来源:IT技术作者:seo实验室小编阅读:59次「手机版」
 

cookie设置

一、什么是cookie

我们在浏览器中,经常涉及到数据的交换,比如你登录邮箱,登录一个页面。我们经常会在此时设置30天内记住我,或者自动登录选项。那么它们是怎么记录信息的呢,答案就是今天的主角cookie了,Cookie是由HTTP服务器设置的,保存在浏览器中,但HTTP协议是一种无状态协议,在数据交换完毕后,服务器端和客户端的链接就会关闭,每次交换数据都需要建立新的链接。

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

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

**

二、cookie的基础知识

  1. cookie 是有大小限制的,每个 cookie 所存放的数据不能超过4kb,如果 cookie 字符串的长度超过4kb,则该属性将返回空字符串。
  2. 由于 cookie 最终都是以文件形式存放在客户端计算机中,所以查看和修改 cookie 都是很方便的,这就是为什么常说 cookie 不能存放重要信息的原因。
  3. 每个 cookie 的格式都是这样的:<cookie名>=<值>;名称和值都必须是合法的标示符。
  4. cookie 是存在 有效期的。在默认情况下,一个 cookie 的生命周期就是在浏览器关闭的时候结束。如果想要 cookie 能在浏览器关掉之后还可以使用,就必须要为该 cookie 设置有效期,也就是 cookie 的失效日期。
  5. alert(typeof document.cookie)  结果是 string
  6. cookie 有路径这个概念。就是domain的概念,因为浏览器是个注意安全的环境,所以不同的域之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念,一个网页所创建的 cookie 只能被与这个网页在同一目录或子目录下得所有网页访问,而不能被其他目录下得网页访问。
  7. 其实创建cookie的方式和定义变量的方式有些相似,都需要使用 cookie 名称和 cookie 值。同个网站可以创建多个 cookie ,而多个 cookie 可以存放在同一个cookie 文件中。

三、关于cookie中的属性

1、Path – 路径

指定与cookie关联的WEB页。

值可以是一个目录,或者是一个路径。

如果http://www.china.com/test/index.html 建立了一个cookie,那么在http://www.china.com/test/目录里的所有页面,以及该目录下面任何子目录里的页面都可以访问这个cookie。

这就是说,在http://www.china.com/test/test2/test3 里的任何页面都可以访问http://www.china.com/test/index.html建立的cookie。

但是,如果http://www.china.com/test/ 需要访问http://www.china.com/test/index.html设置的cooke,该怎么办?

这时,我们要把cookie的path属性设置成“/”。在指定路径的时候,凡是来自同一服务器,URL里有相同路径的所有WEB页面都可以共享cookie。

2、Domain – 域

指定关联的WEB服务器或域。

值是域名,比如www.china.com。这是对path路径属性的一个延伸。如果我们想让 www.china.com能够访问bbs.china.com设置的cookie,该怎么办? 我们可以把domain属性设置成“china.com”,并把path属性设置成“/”。

3、Secure – 安全

指定cookie的值通过网络如何在用户和WEB服务器之间传递。

这个属性的值或者是“secure”,或者为空。缺省情况下,该属性为空,也就是使用不安全的HTTP连接传递数据。如果一个 cookie 标记为secure,那么,它与WEB服务器之间就通过HTTPS或者其它安全协议传递数据。不过,设置了secure属性不代表其他人不能看到你机器本地保存的cookie。换句话说,把cookie设置为secure,只保证cookie与WEB服务器之间的数据传输过程加密,而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密,得自己加密数据。

4.expires – 过期时间

指cookie的生命期,确切地说是过期日期。

如果想让cookie的存在期限超过当前浏览器的会话时间,就必须使用这个属性。当过了到期日期时,浏览器会自动删除cookie文件。

四、cookie基础用法

1.设置cookie

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

document.cookie  = 'username=Darren'

如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:

document.cookie="userId=828; userName=hulk";

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

在cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格(需要使用escape()函数进行编码)。

2.获取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
document.cookie="userId=828";
document.cookie="userName=hulk";
//获取cookie字符串
var strCookie=document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");
var userId;
//遍历cookie数组,处理每个cookie对
for(var i=0;i<arrCookie.length;i++){
             var arr=arrCookie[i].split("=");
             //找到名称为userId的cookie,并返回它的值
             if("userId"==arr[0]){
                    userId=arr[1];
                    break;
             }
}
alert(userId);

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

(一般使用正则的方式相对比较简单)

3.删除cookie

为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:

//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-1);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();

4.设置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();

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

  1. 通过new生成一个Date的实例,得到当前的时间;
  2. getDate()方法得到当前本地月份中的某一天,接着加上30就是我希望这个cookie能过在本地保存30天;
  3. 接着通过setDate()方法来设置时间;
  4. 最后 用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有效期就是按照小时为单位的。

**

五、高级部分

**

1..cookie 路径概念

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

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

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

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

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

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

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

 “paths”就是 cookie 的路径,最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie,所有的页面都可以访问到了:

document.cookie = "name=Darren;path=/"

2.cookie 域概念

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

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

“domains”就是设置的 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的值设置成非主域的域名

3.cookie 安全性

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

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

document.cookie = "username=Darren;secure"

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

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

4.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 信息出错了。

相关阅读

关于微信指数,你可能最想了解的9个问题

关于微信指数,也许你有许多的好奇与疑问,微信官方给出了一些解答,请看以下正文。昨晚,在大家观战国足战胜韩足正酣时,而“微信指数”功

关于字体和字体微调(Hinting )的知识

点阵字体与矢量字体点阵字体也叫位图字体,其中每个字形都以一组二维像素 信息表示。由于位图的原故,点阵字体很难进行缩放,特定的点

你必须知道的关于微博上的推广营销

继续使用微博的用户是否了解微博帐户的整体影响?你知道微博受到影响吗?当然,我也是微博的草根用户,我不愿意评论眼泪。我的影响力是每

DTMF信号的分离——关于一篇博客文章的复现(二)

上一回,我们阐述了一下我们的目标以及整理了一下我们的解决方案。接下来就需要上代码了。不过在此之前,有几点我需要说明一下: 1、由

关于 Windows 不断报 "脚本错误 当前页面的脚本发生

笔者 Windows 版本:Windows 8 Enterprise 64 位 (DirectX 11) Windows 有一天忽然开始报 “脚本错误 当前页面的脚本发生错误” 警

分享到:

栏目导航

推荐阅读

热门阅读