Why would setting document.cookie not work in Chrome?

Question

My coworker ran into an issue where NO cookie could be set on Chrome via code like this:

document.cookie = "TEST=1; expires=Tue, 14 Oct 2014 20:23:32 GMT; path=/"

Putting document.cookie into the console immediately after would show results as if I made no change. On refresh of the page, the cookie was not there so it was reporting correctly, just not setting correctly.

The above code would work if he opened a new incognito window and worked for everyone else in general. I removed all his cookies using the dev tools and still had no luck manually setting cookies ( although others would come back that were set via the server headers).

Once he restarted Chrome, it started to behave properly, so it seems like he was running up against some quirk or bug that can no longer be reproduced.

Has anyone else run into this? As of now I am thinking of checking that document.cookie reports back what is expected after setting, and then initiating our cookieless flow for when a user has cookies disabled when things don't match up. I hate the idea of doing that so any suggestions / answers would be great.

It was reproduced every time until browser restart. It makes me worry that another user in the world can run into this and the effect is pretty bad. Devs will think to restart the browser, but I don't know that users would. It could be something to report as a bug to Chrome but I don't have enough info yet, which is why I wonder if anyone else has run into this. — Dave Stein, Oct 13 '14 at 21:23

score 21 · Answer 1 · edited Jul 18 '22 at 00:03

21

The way cookies work, at least in Chrome, is a bit weird.

If you need to change a cookie's value, then you need to add/set each keys one by one.

Try this in your console:

document.cookie; // -> "expires=Tue, 14 Oct 2014 20:23:32 GMT; path=/"
document.cookie = 'TEST=1';
document.cookie; // -> "TEST=1; expires=Tue, 14 Oct 2014 20:23:32 GMT; path=/"

Yes, it has added the key, and not replaced the whole cookie with TEST=1.

If you need to remove a key, you can simply provide no value: TEST=.

I hope this will get you out of the cookie nightmare (it was for me).

edited Jul 18 '22 at 00:03

danronmoon

3,814
5
34
56

answered Feb 19 '15 at 13:43

avetisk

11,651
4
24
37

1

Thanks, this was useful. Is there any specific reason to this? – cst1992 Oct 16 '20 at 09:51
@cst1992 sincerely I have no idea. But I guess it was some early implementation and it was made in hurry, like many things at that time :) – avetisk Oct 17 '20 at 10:06
2

Having actually tried this, I must say that doing `TEST=` will still leave an entry behind, albeit with an empty value. Going to the browser's cookie store and deleting from there will delete the key as well as value. – cst1992 Oct 19 '20 at 09:43
@cst1992: it would be interesting to check if, while locally it keeps `TEST` as an empty string, Chrome actually sends it _or_ not to the server (I just don't have time to do this little test). – avetisk Oct 20 '20 at 13:06
@avetisk In this case, how can you set multiple cookies? – Orozbek Askarov Jun 24 '22 at 17:26

Prateek · Answer 2 · 2017-04-10T13:42:13.430

16

Make sure to run it on a server (at least a local server) so that document.cookie works.

If you locally run this file in the browser. "document.cookie" wouldn't work.

edited Apr 10 '17 at 13:42

answered Apr 09 '17 at 20:56

Prateek

189
1
4

A little late to reply I know, but Cookies are http-related, and if you are viewing locally without using a server such as XAMPP, then you won't be able to generate cookies. However, if you wanted something that worked offline too, you could always consider using [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage – Mark Townsend Jul 24 '19 at 07:28

score 3 · Answer 3 · answered Apr 14 '16 at 00:45

As another user mentioned, you have to set them one-by-one. These functions can be useful in parsing & applying a cookie string:

function clearCookies(){
    var cookies = document.cookie.split(';');
    for(i in cookies){
        var vals = cookies[i].split('=');
        var name = vals.shift(0, 1).trim();
        document.cookie = name+'=';
    }
}
function parseCookies(cookie){
    clearCookies();
    var cookies = cookie.split(';');
    for(i in cookies){
        var vals = cookies[i].split('=');
        var name = vals.shift(0, 1).trim();
        document.cookie = name+'='+vals.join('=');
    }
}

old, but ran into this answer and learned that the clearCookies could be improved by setting the flag 'max-age': -1 on each cookie — superhero, Feb 09 '22 at 13:55

score 2 · Answer 4 · answered Oct 19 '22 at 16:55

You have to set the domain!

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;domain=" + 
  window.location.hostname;
}

score 0 · Answer 5 · answered Aug 08 '20 at 14:23

0

The expiry date set for the cookie might be the problem. I have come into a problem like this before on Chrome. Set the date to present or future date and test if it would work. Probably that was how Chrome was designed.

answered Aug 08 '20 at 14:23

Damilare Koiki

341
3
11

score 0 · Answer 6 · answered Jul 18 '22 at 00:22

We have the same problem in work a while ago, in our case it only happen when we work in local enviroment, after research we crossed an article that said that browser have some kind of problems with localhost:3000, because it recognizes as an insecure page or something like that. We fixed just by replacing localhost:3000 for 127.0.0.1:3000 (i think that the ip depends on your configuration), and after we replaced that it works perfectly. I hope it helps you.

Why would setting document.cookie not work in Chrome?

6 Answers6

Linked