工具庫用久了，你還會原生操作 Cookie 嗎？

程式設計三昧發表於2021-08-28
Cookie

用得好了，工具庫和框架確實是一大助力，但就怕我們會因此習慣了走捷徑，而忘了自己的根本依靠是什麼。

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

總結

別人造的輪子或許好用，但為了提升自己，我們最好也應該試著自己造造輪子，即使粗糙，但那也是自己的。

~

~本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！

知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章