工具庫用久了,你還會原生操作 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 協議》,轉載必須註明作者和本文連結