JS存储cookie、读取cookie、删除cookie详细用法

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

cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。

JS设置cookie:

简单方式:document.cookie="name="+username;

封装方法:

//写cookies,一个小时过期
    function setCookie(name, value) {
        var exp = new Date();
        exp.setTime(exp.getTime() + 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
    }

注意
path=/,path参数用来设置cookie路径,同一路径下不能存储相同名字的两个cookie,当存第二个的时候会把第一个覆盖其实相当于对第一个进行了赋值操作;
不同路径下可以存储相同名字的cookie。读取时如果在多个路径下存在多个cookie,则会读取页面所对应的路径(不是物理路径,是cookie的路径)下的cookie,不注意这点
可能会造成读取的cookie值不正确。删除时只能删除对应路径下的cookie,不指定路径,默认删除的是页面所对应的路径下的cookie。 

读取cookies

//读取cookies
    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

        if (arr = document.cookie.match(reg))

            return unescape(arr[2]);
        else
            return null;
    }
删除cookies

//删除cookies
    function delCookie(name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 60 * 60 * 1000);
        var cval = getCookie(name);
        if (cval != null)
            document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ";path=/";
    }

注意
删除时只能删除对应路径下的cookie,不指定路径,默认删除的是页面所对应的路径下的cookie。

//如果需要设定自定义过期时间
//那么把上面的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天则:d30setCookie("name","hayden","s20");




原文地址:https://www.cnblogs.com/wangzl1163/p/6341129.html