JavaScript操作Cookie——基础篇

   引言

   最近在项目中需要用到cookie来区分UV和PV的数量，之前都是在在后台方法中利用c#操作cookie，而这次根据

需求需要在js中操作cookie，当时遇到这个问题的时候感觉是比较简单的，所以就查了一下资料就完成了，但是当系

统进入测试环境以后cookie中的值在后台方法中就拿不到了，通过监视发现在http请求的头部信息中没有cookie的

值，但是在本地是没有问题的，通过对比路径判断应该是cookie的路径或者是跨域出现了问题，就这个问题正好总结

一下cookie的基本知识。

   Cookie简介

   “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 

cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” cookie 是访问过的网站创建的文件，用于存储

浏览信息，例如个人资料信息。

   从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机

与服务器之间传递信息。

　　在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间

进行通信，所以除了JavaScript以外，服务端的语言（如c#）也可以存取 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 ：

   

<span style="font-family:SimSun;font-size:18px;">document.cookie  = 'username=zhenghao'</span>

以上代码中'username'表示 cookie 名称，'zhenghao'表示这个名称对应的值。假设 cookie 名称并不存在，那么就

是创建一个新的 cookie；如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ，重复使用这

个方法即可。

  二cookie的读取操作

<span style="font-family:SimSun;font-size:18px;">function getRandomNum() {
var arr = document.cookie.match(new RegExp("(^| )" + "statisticssCookie=([^;]*)(;|$)"));
if (arr != null) {
return arr[2];
} else {
var tempRandomNum = guid();//生成类似guid格式的函数
document.cookie = "statisticssCookie = " + tempRandomNum;
return tempRandomNum;
}
}
</span>

   读取cookie的方法还有很多，广大读者可以自己查阅一些资料，在这就不一一解释了。

   三、设置cookie的有效期

   文章中常常出现的 cookie 的生命周期也就是有效期和失效期，即 cookie 的存在时间。在默认的情况下，

cookie 会在浏览器关闭的时候自动清除，但是我们可以通过expires来设置 cookie 的有效期。语法如下：

<span style="font-family:SimSun;font-size:18px;">document.cookie = "name=value;expires=date"</span>

上面代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：

<span style="font-family:SimSun;font-size:18px;">var _date = new Date();
　　_date.setDate(_date.getDate()+30);
　　_date.toGMTString();</span>

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

•通过new生成一个Date的实例，得到当前的时间；

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

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

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

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

在 cookie 中存储信息的函数：

<span style="font-family:SimSun;font-size:18px;">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)</span>

  

   现在我们这个函数是按照天数来设置cookie的有效时间，如果想以其他单位（如：小时）来设置，那么改变第

三行代码即可：

<span style="font-family:SimSun;font-size:18px;">exdate.setHours(exdate.getHours() + expiredays);</span>

      小结

     之前只是知道cookie这个东西是做浏览器缓存来使用，但是对于这个知识点更细致的理解没有，所以在项目中用到

的时候不能灵活运用，因为对这个东西不是很熟所以在使用的过程中不知道存在什么样的问题，更不知道应该如何来

避免，所以我们在学习知识的时候需要了解的多一些，在下一篇博客张会讲解一些高级的知识，像cookie路径、跨域

问题等。