• Cookie 的简单封装


    对于前端工程师来说,在项目开发过程中 cookie 的相关操作还是经常会遇到的,但是直接用原生的方法代码显得不够简洁和语义化,在项目里我们稍稍封装一下,类似于 Storage对象的API,然后在使用时就会方便很多,如下:

    /**
     * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
     * docCookies.getItem(name)
     * docCookies.removeItem(name[, path], domain)
     * docCookies.hasItem(name)
     * docCookies.keys()
     * */
    
    let docCookies = {
      getItem: function (sKey) {
        return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\$&") + "\s*\=\s*([^;]*).*$)|^.*$"), "$1")) || null;
      },
      setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    
        if (!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) { 
          return false; 
        }
    
        let 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;
      },
      removeItem: function (sKey, sPath, sDomain) {
    
        if (!sKey || !this.hasItem(sKey)) { 
          return false; 
        }
    
        document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
        
        return true;
      },
      hasItem: function (sKey) {
        return (new RegExp("(?:^|;\s*)" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\$&") + "\s*\=")).test(document.cookie);
      },
      keys: function () {
        let aKeys = document.cookie.replace(/((?:^|s*;)[^=]+)(?=;|$)|^s*|s*(?:=[^;]*)?(?:1|$)/g, "").split(/s*(?:=[^;]*)?;s*/);
    
        for (let nIdx = 0; nIdx < aKeys.length; nIdx++) { 
          aKeys[nIdx] = decodeURIComponent(aKeys[nIdx])
        }
    
        return aKeys
      }
    }

    使用参数: 

    docCookies.setItem("test0", "Hello world!");
    docCookies.setItem("test1", "Unicode test: u00E0u00E8u00ECu00F2u00F9", Infinity);
    docCookies.setItem("test2", "Hello world!", new Date(2020, 5, 12));
    docCookies.setItem("test3", "Hello world!", new Date(2027, 2, 3), "/blog");
    docCookies.setItem("test4", "Hello world!", "Sun, 06 Nov 2022 21:43:15 GMT");
    docCookies.setItem("test5", "Hello world!", "Tue, 06 Dec 2022 13:11:07 GMT", "/home");
    docCookies.setItem("test6", "Hello world!", 150);
    docCookies.setItem("test7", "Hello world!", 245, "/content");
    docCookies.setItem("test8", "Hello world!", null, null, "example.com");
    docCookies.setItem("test9", "Hello world!", null, null, null, true);
    docCookies.setItem("test1;=", "Safe character test;=", Infinity);
     
    console.log(docCookies.keys().join("
    "));
    console.log(docCookies.getItem("test1"));
    console.log(docCookies.getItem("test5"));
    
    docCookies.removeItem("test1");
    docCookies.removeItem("test5", "/home");
    
    console.log(docCookies.getItem("test1"));
    console.log(docCookies.getItem("test5"));
    console.log(docCookies.getItem("unexistingCookie"));
    console.log(docCookies.getItem());
    console.log(docCookies.getItem("test1;="));

    摘自:MDN 里 Document.cookie

  • 相关阅读:
    【工具基础】google colab的使用
    【CV论文阅读】FoveaBox: Beyond Anchorbased Object Detector研读
    【ubuntu基础】使用清华镜像源更新安装工具
    【ubuntu基础】ubuntu 释放GPU内存
    Ubuntu18.04 rosmelodic opencv版本冲突问题解决
    多传感器标定工具
    pbootcms火车头采集教程(带免登录发布模块)
    家人之间的说话技巧
    pb如何修改授权码
    Spring Boot 异常处理,值得学习!
  • 原文地址:https://www.cnblogs.com/cmyoung/p/11836932.html
Copyright © 2020-2023  润新知