封装简易的cookie处理

Metpoid
511 阅读1分钟

先上代码

cookie:{
        getCookie:function (name){
            let val = ""
            let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)")
            let tokenInfo = document.cookie.match(reg) // 通过上式正则取到cookie中带 name变量 的字段
            if(tokenInfo){
                val = tokenInfo[2]
            }
            return val
        },
        setCookie:function (name,value){
            document.cookie = name + "=" + value
        }
    }

由这个简易的封装来复习一下，正则的match方法和，原生的document.cookie。

1 正则表达式中的match

使用正则表达式模式对字符串执行查找，并且将包含查找的结果作为数组返回。

语法：stringObj.match(rgExp)

  • stringObj:必选项，对其进行查找的String对象或字符串。
  • RgExp:必选项。为包含正则表达式模式和可用标志的正则表达式对象，也可以是包含正则表达式模式和可用标志的变量名或字符串文字。
  • 如果 match 方法没有匹配，则返回null
  • 如果找到匹配，返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果
  • match 方法返回的数组有 3 个属性：input ,index 和 lastIndex
    • Input 属性包含整个被查找的字符串
    • Index属性包含了在整个被查找字符串中匹配的子字符串的位置
    • LastIndex属性包含了最后一次匹配中最后一个字符串的下一个位置 如果没有设置全局标志(g)，数组的0元素包含整个匹配，而第1到n元素包含了匹配中曾出现过的任一个子匹配，这相当于没有设置全局标志的exec方法。 如果设置了全局标志，则元素0 - n 中包含所有匹配。

match 方法使用例

<script language="Javascript">
function MatchDemo() {
            let r; // 声明变量
            let re;
            let s = " I am a good boy"
            re = /boy/i; // 创建正则表达式模式 - 没有全局标识 g
            r = s.match(re); // 尝试匹配搜索字符串
            return r; //返回第一次出现 "boy" 的地方
        }
        function MatchDemo1() {
            let r; // 声明变量
            let re;
            let s = "I am a good boy,but not boys !";
            re = /boy/ig; // 创建正则表达式模式 - 有全局标识 g
            r = s.match(re); // 尝试去匹配搜索字符串
            return r; // 返回的数组包含了所有 "boy" 出现的两个匹配
        }
        document.write(MatchDemo())
        document.write("<BR>")
        document.write(MatchDemo1())
</script>

运行结果

boy
boy,boy

2 原生的 document.cookie

在讲这个属性之前，我们先来聊一聊 什么是cookie

什么是cookie?

cookie是存储于访问者的计算机中的变量，每当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie，你可以使用 Javascript 来创建和取回 cookie 的值。

设置cookie

每个 cookie 都是一个 键/值对 ，可以把下面这样一个字符串赋值给 document.cookie document.cookie = "userId=9527";
document.cookie 看上去就像一个属性，可以赋不同的值，但它和一般的属性不一样，改变他的赋值并不意味着丢失原来的值，例如连接执行下面两条语句： document.cookie="userId=9527"
document.cookie="Metpoid";
这时浏览器将维护两个cookie,分别是 userId 和 userName，因此给document.cookie赋值更像执行类似这样的语句：
document.addCookie("userId=9527");
document.addCookie("userName=Metpoid")

事实上,浏览器就是按照这样的方式来设置 cookie 的，如果要改变一个cookie 的值，只需要重新赋值，例如：
document.cookie="userId=1234"
这样就将名为 userId 的 cookie 值设置成了1234。

获取cookie 的值

下面介绍如何获取cookie 的值，cookie 的值可以由 document.cookie直接获得：
let strCookie=document.cookie;
这将获得以分号隔开的多个 键/值对 所组成的字符串，这些 键/值对包括了该域名下的所有cookie。
document.cookie="userId=9527";
document.cookie="userName=Metpoid"
let strCookie=document.cookie;
console.log(strCookie); // userId=9527;userName=Metpoid
 --当然这个要在环境下运行，因为是获取当前域名下的 cookie。--
 由此可见，只能够一次获取所有的 cookie 值，而不能指定 cookie 名称来获得指定的值，这正是处理cookie值最麻烦的一部分，用户必须自己分析这个字符串，来获取指定的 cookie 值，例如，要获取 userId 的值，可以这样实现:

document.cookie="userId=9527";
document.cookie="userName=Metpoid";
let strCookie=document.cookie
console.log(strCookie); // userId=9527;userName=Metpoid

function getdescookie(strcookie,matchcookie){
    let getMatchCookie;
    let arrCookie=strcookie.split(";");
    for(let i=0;i<arrCookie.length;i++){
        let arr=arrCookie[i].split("=");
        if(matchcookie == arr[0]){
            getMatchCookie = arr[1];
            break
        }
    }
    return getMatchCookie
}
let resultCookie = getdescookie(strCookie,"userId");
console.log(resultCookie);//9527

这样就可以得到单独的 cookie 的值。
如果在某个页面创建了一个 cookie，那么该页面所在目录的其他页面也可以访问该 cookie ，如果这个目录下还有子目录，则在子目录中也可以访问。
为了控制 cookie 可以访问的目录，需要使用 path 参数设置 cookie , 语法如下：
document.cookie="name=value;path=cookieDir";
其中 cookieDir 表示可访问 cookie 的目录。
例如：
document.cookie="userId=200;path=/shop";
就表示当前 cookie 仅能在 shop 目录下使用。
如果要使 cookie 在整个网站下可用，可以将 cookie_dir 指定为根目录，例如： document.cookie="userId=200;path=/";

cookie的常规操作延伸

addCookie

addCookie(name,value,expireHours)该函数接收3个参数：cookie名称，cookie值，以及在多少个小时后过期。说明下：这个expireHours 当然也可以设置成天或者秒等，只是在函数内部的处理稍微变一下而已：

function addCookie(name,value,expireHours){
    let exdate = new Date()
    exdate.setTime(exdate.getTime() + expireHours * 60 * 60 *1000);
    document.cookie = c_name + "=" + escape(value) + ((expireHours == null)?"":";expires=" + exdate.toUTCString())
}

getCookie

获取指定名称的 cookie 值：getCookie(name)。 该函数返回名称为 name 的 cookie 值，如果不存在则返回空，先来看下得到当前 cookie 的代码：

document.cookie="userId=9527";
document.cookie="userName=Metpoid";
console.log(document.cookie); // userId=9527; userName=Metpoid

看到得到的cookie 列表了吧，两个cookie之间用; 隔开后还有空格，所以用正则匹配获取当前指定的某个cookie名称的值，实现如下：

function getCookie(name){
    let arr;
    let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if(arr=document.cookie.math(reg)){
        console.log(arr)
        return arr[2];
    }else{
        return null;
    }
}

上面的代码中在经过 getCookie('userName') 调用后，arr打印出来的值为：
[' userName=Metpoid', ' ', 'Metpoid', '', index: 12, input: 'userId=9527; userName=Metpoid']
如果全局匹配： reg = new RegExp("(^| )" + name + "([^;])(;|$)",'g');*
那么得到的 arr 数组为: ["userName=Metpoid"]
或者不用正则匹配，如下代码：

function getCookie(name){
    let strCookie=document.cookie;
    let arrCookie=strCookie.split(";");
    for(let i=0;i<arrCookie.length;i++){
        let arr = arrCookie[i].split("=");
        if(arr[0]==name){
            return arr[1]
        }
    }
    return null;
}

deleteCookie

删除指定名称的cookie：deleteCookie(name)。该函数可以删除指定名称的cookie，其实现如下：

function deleteCookie(name){
    let exp = new Date();
    exp.setTime(exp.getTime() - 1);
    document.cookie = name + "=v;expires=" + exp.toUTCString();
}

以上就是关于cookie的一些基本使用了，
可参考地址：w3school：JavaScript Cookies

avatar
文章
阅读
粉丝