js中使用cookie详解

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。

而cookie是运行在客户端的，所以可以用JS来设置cookie.

假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值，那么如何来设置和读取cookie呢？

首先需要稍微了解一下cookie的结构，简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

JS设置cookie:

假设在A页面中要保存变量username的值("jack")到cookie中,key值为name，则相应的JS代码为：

代码如下:

document.cookie="name="+username;

JS读取cookie:

假设cookie中存储的内容为：name=admin;password=123

读取cookies

var username=document.cookie.split(";")[0].split("=")[1];//JS操作cookies方法!//写cookiesfunction setCookie(name,value){var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();}

删除cookies

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

由于以上对cookie的操作都是单独的，但是我们在项目开发中不可能纯粹的这样简单使用，下面就是我对cookie进行了封装，然后在调用的时候特别方便了。

设置cookie：

function setCookie(name, value) {    var Days = 1;    var exp = new Date();    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();}

获得cookie：

function getCookie(name) {    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");    if (arr = document.cookie.match(reg))        return unescape(arr[2]);    else        return null;}

删除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的操作封装一下，在使用的时候特别方便。

    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");    if (arr = document.cookie.match(reg))        return unescape(arr[2]);    else        return null;}