How exactly does document.cookie work?

Question

If I get Chrome to show me document.cookie by going into the console and typing document.cookie; it'll give me, say:

"name=John; gender=male";

But then if I type in, say, document.cookie = 5; all it does is add 5; to the start of the string, so I get:

"5; name=John; gender=male";

If I try document.cookie = null; then it doesn't even do anything.

How can this be? It's a variable, isn't it? So why isn't the assignment operator working the way it should? Is it actually just a bit of syntactic sugar rather than a real variable? And if so, what precisely is the sugar covering up?

Solution 1

document.cookie has very special behavior. As you've seen, assigning to it adds (or updates) a cookie (or multiple cookies), rather than replacing all of the cookies. It's very unusual.

Read all about it on MDN.

Solution 2

Why not have a look at MDN?

The string on the right side of the assignment operator to document.cookies should be a semicolon separated list of key-value pairs, i.e. document.cookie = "aKey=5" will set/update the aKey cookie.

So yes, document.cookie shows special behavior.

Solution 3

Here is an example of your "issue". Also, it says the following:

You can delete a cookie by simply updating its expiration time to zero.

Comments

[T.J. Crowder]

@Daniel: No disagreement here. I can't imagine why it would need to be so...obtuse, even back in the day. I mean, an array-like thing with Cookie elements, how cutting edge! ;-)

[Jack M]

So how is this "unusual" behavior implemented? Is it at the interpreter level or does javascript support some kind of operator redefining?

[T.J. Crowder]

@Jack: document is what the ECMAScript specification calls a "host object," not a native object. Host objects can do nearly anything they want to, their semantics lie mostly outside the specification. Ultimately, the assignment becomes an abstract PutValue call on the host object. What the host environment (browser, in this case) does with that is up to the host environment.

[scubbo]

I hope I don't come across as nit-picking here, but was the pluralisation of your first document.cookie intentional? I'm not sure if this is a distinct concept.

[Ellie Kesselman]

Also, it now says "This article is in need of a technical review." It is still a great reference page though. Thank you!

[Giannis Paraskevopoulos]

I wish i could upvote more...This info saved my day.