我理解的 Cookie 讀/寫/刪除

Gaara發表於2018-11-07
Cookie

不吐槽，上來就搞。希望堅持下去吧，先定一個小目標：一週寫一篇。

Cookie 是什麼？

按個人理解，Cookie就是一個比較安全的資料儲存倉庫。說倉庫可能有點不太合適，因為它的容量比較小，瀏覽器對它的數量作了限制（不同瀏覽器限制的數量不同，有20個、30個、50個等等）。Cookie 一般是由伺服器端生成並儲存到瀏覽器中。

Cookie 家族成員

我理解的 Cookie 讀/寫/刪除
以掘金首頁為例，開啟控制檯後可以看到 Cookie 的9個屬性。

  • Name

必項。用來設定 Cookie 的名稱。

  • Value

選填。名稱對應的值。

  • Domain

選填。Cookie 所在的域名，預設寫入當前域名。

  • Path

選填。該 Cookie 作用的路徑。

  • Expires/Max-Age

選填。Cookie 的失效/刪除時間，預設關閉瀏覽器頁面時該 Cookie 失效/刪除。

其中，Expires 的格式為 GMT （ 如："Wed, 07 Nov 2018 07:12:39 GMT" ）。它指定的是頁面最後訪問的時間，即絕對過期時間，是一個固定值。如果客戶端和服務端 Expires 設定的不一致，會存在偏差（未驗證）。

而 Max-Age 是頁面訪問後的存活時間，並不是固定值。它告訴瀏覽器此 Cookie 還有多久過期。它的單位是秒。

Max-Age 的優先順序比 Expires 高。

  • Size

表示此條 Cookie 的大小，無法修改。

  • HTTP

服務端設定。如果將該屬性設為true，那麼前端通過js將會獲取不到cookie資訊，這樣能有效的防止XSS攻擊。（網上找的說明，未驗證）。

  • Secure

伺服器端設定。如果將其設為true，cookie只能用https協議傳送給伺服器端，不能通過http協議傳送。 https 中的 s 不就是 secure的意思嗎？不知道有沒有這個說法。[滑稽]

  • SameSite

這個屬性個人不是很明白，網上查了下，好像是防止 CSRF 攻擊的，如果有興趣的可以自己去了解一下。

加個下劃線，畢竟上面的都是理論，下面的才是實踐?。要不要一起敲敲看？

Cookie 的讀/寫/刪除

讀

// js 原生提供的方法，輸出的是當前域名下的所有 Cookie，以 ';' 分隔。
document.cookie
複製程式碼

我理解的 Cookie 讀/寫/刪除

如果想獲取某一個 Cookie 的值，那通過分隔符 ';' 這個特點，完全可以封裝一個方法。

// 獲取某個 Cookie 的值
function getCookie(name) {
    var arrCookies = document.cookie.split(';');
    for(var i=0; i<arrCookies.length; i++) {
        var newN = arrCookies[i].trim().split('=');
        if(newN[0] == name) {
            return newN[1];
        }else {
            alert('該 Cookie 不存在');
        }
    }
}
複製程式碼

寫

Cookie 的寫入和讀取都是通過 document.getCookie

// 舉個栗子
document.cookie = 'Gaara=Partiny;';
複製程式碼

我理解的 Cookie 讀/寫/刪除
只設定 Cookie 的 Name 和 Value 屬性，域名預設是當前域名。

我們可以通過相同的方法，來為 Cookie 設定其他屬性，屬性之間用 ';' 分隔。

// 獲取當前的時間戳
var ct = Date.parse(new Date());
// 獲取當前時間，並在此基礎上加30分鐘
var dt = new Date(ct + 30*60*1000);
// 時間戳轉為 GMT 格式
dt.toGMTString();
// 寫入 Cookie，並設定 Expires
document.cookie = 'Gaara01=Partiny01;Expires='+dt;
複製程式碼

我理解的 Cookie 讀/寫/刪除

刪除

Cookie 的刪除和寫入想法，寫入是賦值，而刪除就是賦空值，並將時間置為失效。

document.cookie = 'Gaara01=;Expires=Thu, 01 Jan 1970 00:00:00 GMT';
複製程式碼

如果要刪除所有的 Cookie，與獲取類似，也可以封裝一個方法自己用。

不過我自己測試了一下，發現清除的都是通過 document.cookie 寫進去的域名，原有的並沒有清除掉，具體原理不太清楚。

// 清除所有 Cookie。 個人封裝的，可能會有紕漏，望指正
function clearAllCookie() {
    var arrCookies = document.cookie.split(";");
    for (var i = 0; i < arrCookies.length; i++) {
        var c = arrCookies[i].trim();
        var isEqual = c.indexOf("=");
        var name = isEqual > -1 ? c.substr(0, isEqual) : c;
        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;";
    }
}
複製程式碼

總結一下

因為平時工作接觸的 Cookie 不多，所以以上的內容可能在大佬看來比較淺顯，甚至會有錯誤，望指正，多謝。

相關文章