1

I'm trying to change the content of a cookie when the user click on a button, and refresh the page after this. My cookie is named cookieConsent and has the content {"isCookieBarHidden":true,"cookiePreferences":{"functional":true,"userPreferences":true,"analytics":true,"advertisements":true}}

I'm trying to change "isCookieBarHidden":true to false on click on a button with an id, and reload the page after to display again the cookiebar of a website.

Is it possible to do this with pure Javascript ? If not, how in jquery ?

Playzare
  • 93
  • 3
  • 13
  • 2
    Your question shows no research effort at all. Have you tried anything? What was the problem? And yes it is possible in js (in the end jquery is just a lib written in js) – Yury Tarabanko Jan 14 '19 at 17:18
  • I I can delete the entire cookie and rewrite it, but I would like to save the data entered by the user by editing only the first part and I can't do it. In Jquery I can do it with a click but not in javascript. Here where i am in jquery (not working) : $("#cookiebar").on('click',function(){ var value = false, $.cookie('cookieConsent', 1); $.cookie('value',isCookieBarHidden); }); I think i have to use something like this instead : cookieValue = $.cookie("cookieConsent", { isCookieBarHidden: 'false' }); – Playzare Jan 14 '19 at 17:31

1 Answers1

1

You can change a cookie's content the same way that you set it. Just assign new values to it and it should overwrite the old one. But if you have a cookie with a lot of properties, you can just use the includes() method to check the cookie's current isCookieBarHidden value and then based on that retrieved value, you can use the replace() method to change it's value to false or even better, toggle between true and false accordingly then reload the page like this:

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');
}

Check the Code Snippet below for a practical example of what I have described above:

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>
AndrewL64
  • 15,794
  • 8
  • 47
  • 79
  • Thank you very much for this very detailed explanation, I begin to understand the principle. I added `` in the head of my webpage and this function in a js file : `function EditCookie() { document.cookie.replace('"isCookieBarHidden":true', '"isCookieBarHidden":false'); location.reload(); }` but it doesn't work, doesn't reload the page. Maybe because I do not specify anywhere that I want to edit the isCookieBarHidden element of the cookieConsent cookie? – Playzare Jan 14 '19 at 18:11
  • Hmm.... Are you setting the cookie via a local IP or localhost? If yes, then it'll not work because as [stated here](https://bugs.chromium.org/p/chromium/issues/detail?id=56211), **`You can only set domain cookies for registry controlled domains, i.e. something ending in .com or so, but not IPs or intranet hostnames like localhost`**. – AndrewL64 Jan 14 '19 at 18:14
  • No it's on my online website, maybe the problem is from the `location.reload();` i tried `location.href = location.href;` but doesn't work too and the cookie is untouched if i force refresh after the click :/ i don't understand how cookies are working! – Playzare Jan 14 '19 at 18:18
  • That's weird. Hold on. Let me check if there's an alaterntive for location.reload() – AndrewL64 Jan 14 '19 at 18:19
  • You don't think i have to precise cookieConsent somewhere? In any case, thank you very much for your help! – Playzare Jan 14 '19 at 18:19
  • Try adding `return document.cookie;` above the location.reload() but outside the if/else statement and see if that helps. In the meanwhile, let me try to fiddle with the current code. – AndrewL64 Jan 14 '19 at 18:21
  • I see true in the console with the number 2 at the left, is it normal ? Thanks for your time again ! ^^ – Playzare Jan 14 '19 at 18:24
  • Maybe in chrome it's weird for cookies ? https://stackoverflow.com/a/36611922/3680882 – Playzare Jan 14 '19 at 18:27
  • @Playzare Oh ok. I think I know what/where the problem is. Inside the if statement and else statement, add `document.cookie =` before `document.cookie.replace`. I have edited the answer to include that. – AndrewL64 Jan 14 '19 at 18:27
  • And I checked the link you provided just now. That could be another reason too. Can you check the current code above (with the `document.cookie =` part too) in other browsers like Edge or Firefox and see if it works. If it does, then I will try fiddling with the code again. – AndrewL64 Jan 14 '19 at 18:29
  • Okay! Thanks ! But for my situation i need to just get the cookie itself not create it, because maybe one user will have some parameters at true/false and others all at true for example. So how can i call the `document.cookie = 'cookieConsent = {"isCookieBarHidden":true,"cookiePreferences":{"functional":true,"userPreferences":true,"analytics":true,"advertisements":true}}';` without editing it, can i use something like `document.cookie = 'cookieConsent'` alone ? Thanks ! – Playzare Jan 14 '19 at 18:31
  • 1
    Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186671/discussion-between-andrewl-and-playzare). – AndrewL64 Jan 14 '19 at 18:32