工具库用久了，你还会原生操作 Cookie 吗？

Posted 2021-09-03 编程三昧

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了工具库用久了，你还会原生操作 Cookie 吗？相关的知识，希望对你有一定的参考价值。

用得好了，工具库和框架确实是一大助力，但就怕我们会因此习惯了走捷径，而忘了自己的根本依靠是什么。

前言

前端技术的飞速发展，给从业人员不可避免地带来了“疲劳”感，我们常常会感叹学不动了。于是，为了给我们“减压”，各种工具库和框架们诞生了。

对公司来说，通过工具库和框架的引入，一方面是约束了代码风格，提高了可维护性，最重要的是可以缩短开发周期，早日出成品。

对个人来说，各种工具库和框架用起来简直不要太爽，再也不用哼哧哼哧地啃那些原生的操作方法了，既解放了脑力，又多出了摸鱼的时间，还不用考虑方法的准确性……一箭多雕的买卖简直是太划算了！

公司是追求效益的，主张引入工具库和框架无可厚非，可如果我们个人也沉迷于此，那就真的有问题了。

固然，我们不能否认工具库和框架的优势，但能作为我们前进基石的永远不可能是工具库和框架。

用得好了，工具库和框架确实是一大助力，但就怕我们会因此习惯了走捷径，而忘了自己的根本依靠是什么。

感慨有点多，但确实是有感而发。今天有测试组的同事找我给他们写一个记住密码的脚本，因为考虑到功能简单，没必要引入工具库，就使用原生操作来实现，结果，我竟然写地磕磕绊绊，中途还不得不上网查资料。就这么一个简单的实现，何至于此啊！？

饭来张口的日子过多了，就忘了怎么做饭了！我真想知道，如果当某一天没了“饭源”时，我们会有多少人被“饿死”？

Cookie 的操作

关于 Cookie 的相关概念，若有需要，可查看这里和这里。

设置 Cookie

Cookie 的设置需要包含以下属性：

key String 类型
value String 类型
expires 可选，符合 HTTP-date 规范的时间戳，也可设置 max-age（数字，单位为秒）。设置则为持久性 Cookie，缺省则为会话期 Cookie。
path 可选，String 类型
domain 可选，String 类型
secure 可选，String 类型

一个简单的设置 Cookie 的方法：

function setCookieItem(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\\-age|path|domain|secure)$/i.test(sKey)) {
        return false;
    }
    var sExpires = "";
    if (vEnd) {
        switch (vEnd.constructor) {
            case Number:
                sExpires = vEnd === Infinity 
                    ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" 
                    : "; max-age=" + vEnd;
                break;
            case String:
                sExpires = "; expires=" + vEnd;
                break;
            case Date:
                sExpires = "; expires=" + vEnd.toUTCString();
                break;
        }
    }
    document.cookie = encodeURIComponent(sKey) 
        + "=" + encodeURIComponent(sValue) 
        + sExpires 
        + (sDomain ? "; domain=" + sDomain : "") 
        + (sPath ? "; path=" + sPath : "") 
        + (bSecure ? "; secure" : "");
    return true;
}

是否存在 Cookie

function isCookieItemExisted(sKey) {
    return new RegExp("(?:^|;\\\\s*)" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\\\$&") + "\\\\s*\\\\=").test(document.cookie);
}

删除 Cookie

删除 Cookie 只需要将其过期时间expires 设为过去的时间即可，也可以通过设置 max-age 为 0 或 -1 来删除 Cookie：

function removeCookieItem(sKey, sPath, sDomain) {
    if (!sKey || !isCookieItemExisted(sKey)) {
        return false;
    }
    document.cookie = encodeURIComponent(sKey) 
        + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" 
        + (sDomain ? "; domain=" + sDomain : "") 
        + (sPath ? "; path=" + sPath : "");
    return true;
}

查找 Cookie

function getCookieByKey(sKey) {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\\\$&") + "\\\\s*\\\\=\\\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },

总结