Question

我试图在用户单击按钮时更改cookie的内容，然后在此之后刷新页面。我的Cookie名为cookieConsent，内容为{"isCookieBarHidden":true,"cookiePreferences":{"functional":true,"userPreferences":true,"analytics":true,"advertisements":true}}

我试图通过单击具有ID的按钮将"isCookieBarHidden":true更改为false，然后重新加载页面以再次显示网站的cookiebar。

是否可以使用纯Javascript做到这一点？如果没有，如何在jquery中？

Answer 1

您可以按照设置Cookie的方式更改其内容。只需为其分配新值，它将覆盖旧值。但是，如果您有一个具有很多属性的cookie，则只需使用 includes() 方法来检查cookie的当前isCookieBarHidden值，然后基于该检索到的值，您可以可以使用 replace() 方法将其值更改为 false 甚至更好，可以在 true 和 false 然后重新加载页面，如下所示：

if (document.cookie.includes('"isCookieBarHidden":true')) {
   document.cookie = document.cookie.replace('"isCookieBarHidden":true', '"isCookieBarHidden":false');
} else {
    document.cookie = document.cookie.replace('"isCookieBarHidden":false', '"isCookieBarHidden":true');
}

查看下面的代码段，以获取上述内容的实际示例：

document.cookie = 'cookieConsent = {"isCookieBarHidden":true,"cookiePreferences":{"functional":true,"userPreferences":true,"analytics":true,"advertisements":true}}';

var dc = document.cookie;

function alertCookie() {
    alert(dc);
}

function toggleCookie() {
  
  if (document.cookie.includes('"isCookieBarHidden":true')) {
    document.cookie.replace('"isCookieBarHidden":true', '"isCookieBarHidden":false');
  } else {
    document.cookie.replace('"isCookieBarHidden":false', '"isCookieBarHidden":true');
  }
  
  location.reload();
}



document.getElementById("toggleCookie").addEventListener("click", toggleCookie);
document.getElementById("alertCookie").addEventListener("click", alertCookie);

<!-- HTML -->

<button id="toggleCookie">Toggle Cookie</button>
<button id="alertCookie">Show cookies</button>

单击并重新加载页面上的Javascript编辑cookie的部分值

1 个答案: