js中cookie详细讲解及使用实例

时间:2017-11-13
cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据,本文章向大家借js操作cookie的几个函数(创建cookie、读取cookie、删除cookie)

什么是 Cookie

Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时,Web 应用程序都可以读取 Cookie 包含的信息。

假设在用户请求访问您的网站 http://www.manongjc.com/ 上的某个页面时,您的应用程序发送给该用户的不仅仅是一个页面,还有一个包含日期和时间的 Cookie。用户的浏览器在获得页面的同时还得到了这个 Cookie,并且将它保存在用户硬盘上的某个文件夹中。

以后,如果该用户再次访问您站点上的页面,当该用户输入 URL http://www.manongjc.com/时,浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie。如果该 Cookie 存在,浏览器就将它与页面请求一起发送到您的站点,您的应用程序就能确定该用户上一次访问站点的日期和时间。您可以根据这些信息向用户发送一条消息,也可以检查过期时间或执行其他有用的功能。

cookie 工作原理

Cookie是在浏览器访问Web服务器的某个资源时,由Web 服务器在HTTP 响应消息头文件中附带传递给浏览器的一些数据。如果浏览器保存了这些数据,当它每次访问该web服务器时,都应在HTTP 请求头文件中将这些数据回传给WEB 服务器。WEB 服务器将这些数据在HTTP 请求头文件中使用Set-Cookie响应头字段将Cookie信息发送给浏览器,浏览器则通过在HTTP 请求消息中增加Cookie请求字段将Cookie回传给web服务器,一个Cookie只能标识一种信息。一个web 服务器可以给浏览器发送多个Cookie ,这样web服务器和浏览器之间可以使用多个Cookie 来传递信息。

Cookie 基础知识

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

js中如何操作cookie 

1. 创建cookie

function createCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

2. 读取cookie

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

3. 给cookie设置终止日期

例如:如果要将cookie设置为10天后过期,可以这样实现:

//获取当前时间
var date=new Date();
var expiresDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString();

4.删除cookie

function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

cookie深入篇

1. js 操作cookie路径问题

这里主要不是讲这个方法,js写cookie这种代码网上一抓一把,在使用的时候遇到一点问题,就是写的cookie 是有路径问题的,在user目录下可以使用跳转到另外一个目录下cookie,经过比较cookie与其他cookie的不同发现,用js写的cookie在当前目录下,不在根目录下,这里可以用这个来控制访问但是不符合现在的需求,在网上的某个地方看到一段代码,可以解决这个问题,在这里贴出来,大家需要用的可以参考。代码如下:

Utils.writeCookie = function (value, name, key) {
var Days = 2;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
if (key == null || key == "") {
    document.cookie = name + "=" + encodeURI(value) + ";expires=" + exp.toGMTString()+";path=/";
}
else {
    var nameValue = getCookie(name);
    if (nameValue == "") {
      document.cookie = name + "=" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
    }
    else {
        var keyValue = getCookie(name, key);
        if (keyValue != "") {
            nameValue = nameValue.replace(key + "=" + keyValue, key + "=" +encodeURI ( value));
            document.cookie = name + "=" + nameValue + ";expires=" + exp.toGMTString() + ";path=/";
        }
        else { 
            document.cookie = name + "=" + nameValue + "&" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
        }
        } 
    }
}

顺带把读取cookie的也一起贴 了,引用了别人的代码并非原创:

Utils.readCookie = function(name,key) {
var nameValue = "";
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)) {
nameValue = decodeURI(arr[2]);
}
if (key != null && key != "") {
reg = new RegExp("(^| |&)" + key + "=([^(;|&|=)]*)(&|$)");
if (arr = nameValue.match(reg)) {
alert( decodeURI (arr[2])); return decodeURI(arr[2]);
}
else return "";
}
else {
return nameValue;
}
}

2. js中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的值设置成非主域的域名。

3. 提高COOKIE的安全性

网络上常见方案是:  

给Cookies加个加密算法。 给Cookies加个时间戳和IP戳,实际就是让Cookies在同个IP下多少时间内失效。最终使用MD5来MAC签名防止篡改……但这样仍然可以看到明文信息,有一定不安全之处。

我的方案是:

cookie==3des(“值,时间,IP戳”);   最终得到的COOKIE是这样的:3BD1B32614A528EA

使用3DES来加密,这样保证客户端没有明文……。

服务端检查的时候,再解密出来值,时间,IP戳,并检查过期时间与IP……不符的需要清空此COOKIE,转向登录页面..