JS设置cookie、读取cookie、删除cookie

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie.

cookie的适用场景

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

cookie的结构

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

JS设置cookie

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

document.cookie="name="+username;

JS读取cookie:

假设cookie中存储的内容为：name=jack;password=123
则在B页面中获取变量username的值的JS代码如下：

var username=document.cookie.split(";")[0].split("=")[1];

给cookie中添加值，并设置过期时间

//JS操作cookies方法

//写cookies
function 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

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

对于以上正则表达式：
(1)^ 匹配输入字符串的开始位置，除非在方括号表达式中使用，此时它表示不接受该字符集合。要匹配 ^ 字符本身，请使用 ^。
所以：(^| )匹配字符串的开始位置或者空格；([^;]*)匹配除了分号以外的任意字符；(;|$)匹配分号或者字符串的结束位置
(2)match是字符串的方法，replace和match是字符串的常用方法，match返回一个数组，如下所示：

 ["uuid_tt_dd=1640106255935622948_20170508;", "", "1640106255935622948_20170508", ";", index: 0, input: "uuid_tt_dd=1640106255935622948_20170508; __utma=17…_lpvt_6bcd52f51e9b3dce32bec4a3997715ac=1507175788"]
0:"uuid_tt_dd=1640106255935622948_20170508;"
1:""
2:"1640106255935622948_20170508"
3:";"

其中数组的长度为4，第一项是整体匹配所得值，第二项到第四项一次为3个捕获组的匹配项；后面两项为index和input。
(3)正则表达式中可以使用 字符串 与 变量 拼接。

删除cookies

为了删除一个cookie，可以将其过期时间设定为一个过去的时间

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

自定义cookie的过期时间

//使用示例
setCookie("name","hayden");
alert(getCookie("name"));


//如果需要设定自定义过期时间
//那么把上面的setCookie　函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","hayden","s20");

escape方法

(1)escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
(2)返回值：已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。
(3)说明:
该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。
(4)可以使用 unescape() 对 escape() 编码的字符串进行解码。

javascript获取cookie的过期时间

javascript和动态页无法获取cookie过期的时间，过期时间由浏览器管理，javascript和动态页只能设置过期时间，无法通过document.cookie（javascript）或者Cookie.Expires（asp.net）属性获取到。

一定要获取过期时间，需要通过另外一个cookie值来记录对应cookie的过期时间。如下：

代码如下:

var d = new Date();
    d.setHours(d.getHours() + 1); //1小时候过期
    document.cookie = 'testvalue=123;expires=' + d.toGMTString(); //存储cookie值
    document.cookie = 'testexp=' + escape(d.toLocaleString()) + ';expires=' + d.toGMTString(); //存储cookie过期时间，要获取testvalue这个cookie的过期时间，通过获取testexp这个cookie来实现

注意：以上，这样设置cookie，后者不会覆盖前者，均添加到cookie中。

参考：http://www.jb51.net/article/64330.html

最后

以上就是大气玉米为你收集整理的JS设置cookie、读取cookie、删除cookie的全部内容，希望文章能够帮你解决JS设置cookie、读取cookie、删除cookie所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。