JavaScript 刪除cookie

建立cookie之後，可能出於各種原因需要將其刪除。

網路上提供有很多封裝好的刪除程式碼，但是絕大多數忽略了一個問題。

從而導致程式碼有時候好用，有時則不能刪除指定cookie，下面將詳細介紹一下如何刪除cookie。

後面文章會涉及到一些概念，這裡提前給出參考文章：

（1）.path與domain參閱cookie path路徑與domain域一章節。

（2）. Secure與HttpOnly參閱cookie Secure與HttpOnly一章節。

一.刪除cookie的方式：

（1）.沒有顯式設定cookie過期時間：

如果沒有顯示設定cooke過期時間，cookie不會存入本地硬碟，僅存留於記憶體中。

當我們關閉瀏覽器的時候，cookie會自動刪除，生命週期無需我們操控。

（2）.顯式設定cookie過期時間：

更多的時候，cookie的生命週期可能需要人為的設定，以達到某些需求。

比如使用者名稱與密碼儲存一天、一週或者一月等設定，通過Expires屬性即可實現。

噹噹前時間日期超過Expires屬性值時，cookie就會被自動刪除。

關於過期時間可以參閱JavaScript 設定cookie 過期時間一章節。

二.封裝刪除：

JavaScript並沒有內建介面直接刪除cookie，但是可以利用過期時間實現刪除功能。

程式碼例項如下： 

[JavaScript] 純文字檢視 複製程式碼
//取cookies     
function getCookie(name){
  let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) return unescape(arr[2]); 
  return null;
}
//刪除cookie
function delCookie(name){
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

上面程式碼可以實現刪除指定名稱cookie的功能，比較常用，且網上程式碼絕大多數都是如此，本文作者曾經也對此深信不疑，因為它的確能夠刪除指定的cookie，但是上述程式碼有缺陷，有時會不能夠刪除指定名稱的功能，下面做一下演示。

通過控制檯下新增如下cookie：

[JavaScript] 純文字檢視 複製程式碼
document.cookie="ant=螞蟻部落;path=/"

程式碼執行效果截圖如下：

下面進行刪除操作，程式碼執行效果截圖如下：

可以看到，名稱為ant的cookie並沒有被刪除，沒刪除就對了，因為上面的函式封裝沒有考慮周全。

cookie的修改需要遵循一個原則，那麼就是cookie的如下四個屬性必須匹配：

（1）.key

（2）.domain

（3）.path

（4）.secure

當我們在設定cookie的時候顯式設定path為根目錄/，但是在刪除的時候沒有規定路徑，所以刪除失敗。

刪除cookie就是對cookie的過期時間的修改，所以也要遵循上述原則，程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼
//取cookies     
function getCookie(name){
  let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) return unescape(arr[2]); 
  return null;
}
//刪除cookie
function delCookie(name){
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) 
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString()+";path=/";
}
delCookie("ant");
document.cookie;

程式碼執行效果截圖如下：

可以看到名稱為ant的cookie成功被刪除。

所以這一點要特別的主意，因為如果對cookie掌握的不是太全面可能就會導致無法刪除指定cookie得現象。

且查錯比較困難，上述程式碼沒有進行封裝，只是演示了刪除cookie的注意點。