博客列表 >工具库用久了,你还会原生操作 Cookie 吗?

工具库用久了,你还会原生操作 Cookie 吗?

编程三昧
编程三昧原创
2021年08月28日 20:44:24753浏览

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

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;  },

总结

别人造的轮子或许好用,但为了提升自己,我们最好也应该试着自己造造轮子,即使粗糙,但那也是自己的。

~

~本文完,感谢阅读!


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议