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

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的内容。 只需为其分配新值，它将覆盖旧值。 但是，如果您有一个具有很多属性的cookie，则可以仅使用include（）方法检查该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>