Javascript在点击和重新加载页面上编辑cookie的部分值

Question

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

我试图在单击带有 id 的按钮时将 "isCookieBarHidden":true 更改为 false ，然后重新加载页面以再次显示 cookiebar一个网站。

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

Answer 1

您可以按照设置 cookie 的方式更改 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>