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

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

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


7.png


前言


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


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


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


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


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


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


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


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


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


总结


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


~本文完,感谢阅读!


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


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


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




相关文章
|
6月前
|
存储 Web App开发 安全
Cookie和session 及Web相关工具
Cookie和session 及Web相关工具
|
6月前
|
存储 Web App开发 安全
Django中Cookie相关操作
Django中Cookie相关操作
|
存储 JavaScript
js -cookie的操作
cookie是存储在客户端浏览器中的一段文本信息。
|
6月前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
44 0
|
6月前
|
存储 前端开发 Java
【源码共读】在前端如何操作 Cookie
【源码共读】在前端如何操作 Cookie
110 1
|
12月前
|
存储 JavaScript 前端开发
cookie相关操作
cookie相关操作
54 0
|
JavaScript 前端开发 Java
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙
虽然Cookie和Session都是暂时存在的,不久就会被删掉,但是我们要退出登录的时候,就不能等待其自然消除了~
73 0
|
存储 前端开发 Java
【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙
虽然Cookie和Session都是暂时存在的,不久就会被删掉,但是我们要退出登录的时候,就不能等待其自然消除了~
104 0
|
测试技术
Selenium 操作表单元素、行为链、操作Cookie和页面等待
Selenium 操作表单元素、行为链、操作Cookie和页面等待
115 0
|
存储 数据安全/隐私保护
servelt的cookie操作
servelt的cookie操作