單擊並重新加載頁面上的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>