工具库用久了,你还会原生操作 Cookie 吗?
用得好了,工具库和框架确实是一大助力,但就怕我们会因此习惯了走捷径,而忘了自己的根本依靠是什么。
前言
前端技术的飞速发展,给从业人员不可避免地带来了“疲劳”感,我们常常会感叹学不动了。于是,为了给我们“减压”,各种工具库和框架们诞生了。
对公司来说,通过工具库和框架的引入,一方面是约束了代码风格,提高了可维护性,最重要的是可以缩短开发周期,早日出成品。
对个人来说,各种工具库和框架用起来简直不要太爽,再也不用哼哧哼哧地啃那些原生的操作方法了,既解放了脑力,又多出了摸鱼的时间,还不用考虑方法的准确性……一箭多雕的买卖简直是太划算了!
公司是追求效益的,主张引入工具库和框架无可厚非,可如果我们个人也沉迷于此,那就真的有问题了。
固然,我们不能否认工具库和框架的优势,但能作为我们前进基石的永远不可能是工具库和框架。
用得好了,工具库和框架确实是一大助力,但就怕我们会因此习惯了走捷径,而忘了自己的根本依靠是什么。
感慨有点多,但确实是有感而发。今天有测试组的同事找我给他们写一个记住密码的脚本,因为考虑到功能简单,没必要引入工具库,就使用原生操作来实现,结果,我竟然写地磕磕绊绊,中途还不得不上网查资料。就这么一个简单的实现,何至于此啊!?
饭来张口的日子过多了,就忘了怎么做饭了!我真想知道,如果当某一天没了“饭源”时,我们会有多少人被“饿死”?
Cookie 的操作
关于 Cookie 的相关概念,若有需要,可查看 这里 和 这里。
设置 Cookie
Cookie 的设置需要包含以下属性:
key String 类型
value String 类型
expires 可选,符合 HTTP-date 规范的时间戳,也可设置 max-age(数字,单位为秒)。设置则为持久性 Cookie,缺省则为会话期 Cookie。
path 可选,String 类型
domain 可选,String 类型
secure 可选,String 类型
一个简单的设置 Cookie 的方法:
functionsetCookieItem(sKey,sValue,vEnd,sPath,sDomain,bSecure){if(!sKey||/^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)){returnfalse;}varsExpires="";if(vEnd){switch(vEnd.constructor){caseNumber:sExpires=vEnd===Infinity?";expires=Fri,31Dec999923:59:59GMT":";max-age="+vEnd;break;caseString:sExpires=";expires="+vEnd;break;caseDate:sExpires=";expires="+vEnd.toUTCString();break;}}document.cookie=encodeURIComponent(sKey)+"="+encodeURIComponent(sValue)+sExpires+(sDomain?";domain="+sDomain:"")+(sPath?";path="+sPath:"")+(bSecure?";secure":"");returntrue;}
是否存在 Cookie
functionisCookieItemExisted(sKey){returnnewRegExp("(?:^|;\\s*)"+encodeURIComponent(sKey).replace(/[-.+*]/g,"\\$&")+"\\s*\\=").test(document.cookie);}
删除 Cookie
删除 Cookie 只需要将其过期时间expires 设为过去的时间即可,也可以通过设置 max-age 为 0 或 -1 来删除 Cookie:
functionremoveCookieItem(sKey,sPath,sDomain){if(!sKey||!isCookieItemExisted(sKey)){returnfalse;}document.cookie=encodeURIComponent(sKey)+"=;expires=Thu,01Jan197000:00:00GMT"+(sDomain?";domain="+sDomain:"")+(sPath?";path="+sPath:"");returntrue;}
查找 Cookie
functiongetCookieByKey(sKey){returndecodeURIComponent(document.cookie.replace(newRegExp("(?:(?:^|.*;)\\s*"+encodeURIComponent(sKey).replace(/[-.+*]/g,"\\$&")+"\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"))||null;},
总结
别人造的轮子或许好用,但为了提升自己,我们最好也应该试着自己造造轮子,即使粗糙,但那也是自己的。
~
~本文完,感谢阅读!
更多相关文章
- 前端、后端、测试、研发经理必备技能-ApiPost接口管理工具
- 安装ApiPost-接口工具 发送HTTP请求
- 接口文档生成工具 一键生成文档 ApiPost
- 2分钟玩转中文接口测试工具-ApiPost
- 「Spring认证」Spring 框架概述
- 国内外7款好用的快递物流查询API工具
- 表单,框架,选择器,css的三种插入样式(内联,外部样式,元素中)
- 一个免费开源的轻量级PHP开发框架
- linux(centos)下安装supervisor进程管理工具