写点什么

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

用户头像
编程三昧
关注
发布于: 2 小时前
工具库用久了,你还会原生操作 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;  },
复制代码

总结

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


~


~本文完,感谢阅读!


~


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!

发布于: 2 小时前阅读数: 4
用户头像

编程三昧

关注

学习有趣的知识,塑造有趣的灵魂! 2019.08.30 加入

还未添加个人简介

评论

发布
暂无评论
工具库用久了,你还会原生操作 Cookie 吗?