81

I have this real strange problem with client side javascript setting cookies. I'm developing a little 1 page demo at the moment to use cookies to store some 'preferences'. Please note that I can't use a server side language for this demo or any 3rd party jQuery plugins.

So I've written a javascript object to set a cookie:

var cookie = {
  set: function (name,value,exdays) {

    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var value = escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=name + "=" + value;
    console.log(document.cookie);
  }
}

cookie.set('foo','bar',2);
console.log(document.cookie);

It just returns an empty string. I've gone into Chrome console to see if I can do it via directly modifying document.cookie

> document.cookie = "foo=bar";
"foo=bar"
> document.cookie
""

How do you set a cookie via client side javascript?

Edit: I am not in incognito mode and cookies are enabled.

Improve this question
3
  • Also see developer.mozilla.org/en-US/docs/DOM/document.cookie Commented Apr 10, 2013 at 0:13
  • 1
    Having a similar (but not same) problem. We can read and write cookies, just not all of them. Specifically the session cookie (JSESSIONID) can not be read... It looks like this is a security feature but having a hard time finding info on it... Anyone knows about this? Commented Aug 15, 2013 at 11:31
  • 2
    @StijndeWitt: That's a different question, please ask it on its own instead of adding a bounty to this. Btw, the answer probably are http-only cookies Commented Aug 15, 2013 at 12:14

6 Answers 6

Reset to default
142

HttpOnly cookies cannot be accessed from Javascript and session cookies are usually set as HttpOnly cookies. See also this StackOverflow question: How to read a secure cookie using JavaScript

So... check whether the cookie you want to read has the 'HttpOnly' flag set... If so, you know the culprit. It's not a bug, it's a feature!

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

it's puzzling to me why did "answer" got so many upvotes since it's impossible to set HttpOnly on a cookie written in javascript.
Title: Javascript document.cookie always empty string. Answer: Can happen when there are only cookies with the HttpOnly flag set. No you can't write these cookies from JS, but you can attempt to read cookies from JS and it will return... empty string... even though you see the cookie in the HTTP headers and in the browser inspector, JS won't allow you to read it.
I think it got upvotes because: 1) people actually often try to read e.g. the session cookie from JS. 2) They get empty string as a result. 3) They google and come here. 4) They see this answer and darn it, that's exactly what's happening. 5) Thanks man +1. :)
well, that's too bad, because the answer doesn't answer the QUESTION which is clearly for when writing cookies in js
Yup but the title beats the question in terms of seo... It is the question as far as Google ranking is concerned. People find it and my answer actually answers their question (not OP's, but he has already gotten his answer anyway) so they upvote.
|
65

You can't set cookies by the look of things if its not running in a web server.

file:///C:/Users/me/Desktop/demo/demo.html

however:

http://localhost/demo/demo.html works.

Improve this answer

5 Comments

This caught me out a few times before I knew about it.
actually cookies won't work properly with localhost, you will need a "valid" domain, even if it is the IP, like 127.0.0.1 or 0.0.0.0 for example. check stackoverflow.com/questions/1134290/…
it got me rly confused as well and ofc in the most tutorials they think we should know it somehow
Actually Firefox does allow the cookies to be read from a file page. Chrome and IE don't
For Python users, you can go to the working directory where the files located, then run the command: python3 -m http.server.
1

This worked for me when ran from localhost, running chrome 28.0.1472.0 canary:

<!DOCTYPE html>
<html>
<head>
  <title>localhost cookie</title>
</head>
<body>
  <script type="text/javascript">
    console.log(document.cookie);
    var myCookie = "mycookie=hellocookie";
    document.cookie = myCookie;
  </script>
</body>
</html>

Run it in a server, visit the page and look at your cookie store, refresh the page and look at your console.

It did not set a cookie when opened as a file but worked every time when opened from the server.

Improve this answer

Comments

0

For usage and docs, see here:

https://developer.mozilla.org/en-US/docs/DOM/document.cookie

If you are in Incognito Mode or have cookies disabled, it won't work.

Improve this answer

Comments

0

You might have set a wrong path for the cookie.

In my case I'd set the path in the cookie to /foo because the application is normally on address http://example.org/foo. However, during tests I'd opened the application on the default address http://localhost:3000 which allowed me to create cookies with the path /foo but not read them. The solution was to test the application on address http://localhost:3000/foo.

Improve this answer

Comments

0

  1. cookie will not work if you directly open your file, let's say index.html

    file:///C:/Users/me/Desktop/index.html

  2. however: cookie will work if page (index.html) is opened using a light weight server or local server

    http://localhost/demo/demo.html works. or http://127.0.0.1:5500/temp6.html

  3. For live sever in VS Code you can use Live Serve by Ritwick Dey enter image description here

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.