如何删除JavaScript Cookie？我的eraseCookie函数无法正常运行

Hey there, let's sort out why your eraseCookie isn't doing its job—this is a super common pitfall with Cookie handling, almost always tied to missing path/domain matching or incorrect expiration settings.

First, Let's Recap Your Current Code #

HTML:

<a onclick="setCookie('analystics');">Allow</a> 
<a onclick="eraseCookie('analystics')">Deny</a> 
<p>Click on this paragraph.</p>

Partial setCookie Function:

function setCookie(cname,cvalue,exdays) { 
  var d = new Date(); 
  d.setTime(d.getTime() + (30 * 1000)); 
  var expires = "expires=" + d.toGMTString(); 
  document.cookie = cname + "=" + cvalue + ";" + expires;
}

The Root of the Problem #

When you set a Cookie without specifying a path, browsers automatically use the current page's path as the Cookie's scope. But when you try to delete it, if you don't match that exact path (or use a broader, consistent path like /), the browser won't recognize it as the same Cookie—so your delete request gets completely ignored.

On top of that, deleting a Cookie requires setting its expiration date to a time in the past to tell the browser to discard it immediately, which your original eraseCookie was likely missing.

Fixed Full Code #

Updated setCookie (with defaults and explicit path):

function setCookie(cname, cvalue = "true", exdays = 0.000347) { 
  // 0.000347 days = ~30 seconds, matching your original timeout
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  const expires = `expires=${d.toUTCString()}`; // Use toUTCString instead of toGMTString (more standard)
  // Set path=/ to ensure the Cookie is accessible site-wide, making deletion consistent
  document.cookie = `${cname}=${cvalue};${expires};path=/`;
}

Working eraseCookie Function:

function eraseCookie(cname) {
  // Match the path from setCookie, set expiration to Unix epoch to force immediate deletion
  document.cookie = `${cname}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
}

How to Verify It Works #

1. Click "Allow" to set the Cookie.
2. Open your browser's dev tools (F12) → go to the Application (Chrome) or Storage (Firefox) tab → check the Cookies section—you'll see the analystics Cookie there.
3. Click "Deny" and refresh the Cookies list—it should disappear right away.

内容的提问来源于stack exchange，提问作者John Bright