不吐槽，上來就搞。希望堅持下去吧，先定一個小目標：一週寫一篇。
Cookie 是什麼？
按個人理解，Cookie就是一個比較安全的資料儲存倉庫。說倉庫可能有點不太合適，因為它的容量比較小，瀏覽器對它的數量作了限制（不同瀏覽器限制的數量不同，有20個、30個、50個等等）。Cookie 一般是由伺服器端生成並儲存到瀏覽器中。
Cookie 家族成員
- 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 的值
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 設定其他屬性，屬性之間用 ';' 分隔。
// 獲取當前的時間戳
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 的刪除和寫入想法，寫入是賦值，而刪除就是賦空值，並將時間置為失效。
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 不多，所以以上的內容可能在大佬看來比較淺顯，甚至會有錯誤，望指正，多謝。