Javascript对cookie的“增删查改”

随着H5的发展，本地存储的崛起，cookie的用武之地越来越少了。但是我们在做低版本兼容，老项目维护的时候还是可能会用到cookie的。

document.cookie

首先需要了解一下cookie，它是document对象的一个属性，其值是一个字符串。另外需要注意一点是cookie需要在服务器的支持，也就是说本地直接打开页面不支持所以需要测试的童鞋可以随便打开一个网站，百度，google，或者就是本站，然后打开开发者调试调试控制台(F12/cmd+option+i)找到Resource标签，可以看到左侧有cookie，进去就可以看到当前打开域名下的所有cookie了。

读/查

找一个有cookie的站点(通过上面的方式看到cookie列表不为空即可)，然后到控制台(Console)输出

console.log(document.cookie);

可以看到输出结果为一个字符串，键值通过等号连接，两个键值之间通过分号连接。那我们如何取某一个键的值呢？这里就需要进行一次封装以便使用。值得注意的如果设置cookie没有给值那么存下来的只有键名，而等号和值是没有的，也就是会出现cookie为这种情况：test; test1=value1; ….。当然 只有键名或者不存在我们都返回null，那么我们这里只需要用正则匹配就OK了，没必要通过字符串拆分后再查找。

因为分号等一些字符不能作为value值，所以value需要通过escape”转码”，这里我们需要通过unescape”解码”。

function getCookie(key){
    // 空格或者开始符号开始(第一个不是空格开始的) + key值 + =value 
    // 分号或者结尾符号结尾(最后一个是没有分号的)
    // 匹配成功返回value，否则返回null
    // value为多位非分号的连续字符
    return new RegExp('(^| )' + key + '=(.+?)(;|$)').test(document.cookie) ? unescape(RegExp.$2) : null;
}

写/改

首先要了解，虽然获取cookie是字符串，但是重新赋值并不会覆盖原有的字符串。所以我们不需要通过+=操作重新赋值！写入格式为：

document.cookie='key=value;expires=date';

其中expires=date是设置过期时间，比如我们设置2020年1月1号过期，那么date就等于new Date(2020,1,1).toString()，date并不是毫秒数，而是类似于”Sat Feb 01 2020 00:00:00 GMT+0800 (CST)”的字符串；

如果对同作用域(域名路径相同)下同一个键名赋值，覆盖原有的value和expires。

上面获取我们知道，储存的时候我们需要”转码(escape)”

这样我们对过期时间的设置不太方便，下面我们同样做一次封装：

// expires为多少小时候后过期(一般来说cookie都是天，小时为单位，不会用到多少秒过期的，所以这里直接封装为单位为小时)
function setCookie(key, value, expires) {
    var cookie = key+'=';
    // value值存在
    value && (cookie += escape(value));
    // expires存在
    expires && (cookie += ';expires=' + new Date(+new Date + expires*3600000));

    document.cookie = cookie;
}

修改同样用set，键同名直接会覆盖原有值。

删除

修改过期时间为”昨天(-24小时)”即可。

function removeCookie(key) {
    setCookie(key, '', -24);
}

最后

以上就是优美朋友为你收集整理的Javascript对cookie的“增删查改”的全部内容，希望文章能够帮你解决Javascript对cookie的“增删查改”所遇到的程序开发问题。

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