How to set a cookie's expiration date in Javascript

Question

I am trying to make a cookie that expires on a specific date. On w3schools they said to set it using

document.cookie="mediaType=Video; expires=Fri, 13 Mar 2015 12:00:00 UTC";

However in my code it doesn't seem to be working. What am I doing wrong?

<script>
    var mediaType = "image";
    function checkCookies(){
            document.getElementById("div").innerHTML = document.cookie;
    }
    function getType() {
        document.cookie="mediaType=Video; expires=Fri, 13 Mar 2015 12:00:00 UTC";
        document.getElementById("div").innerHTML = document.cookie
    }
</script>

<body onload="checkCookies()">
    <select onChange="mediaType = this.value">
      <option value="image">Image</option>
      <option value="link">Link</option>
      <option value="text">Text</option>
    </select>
</body>

<div id="div" onclick="getType()"> hi</div>

BONUS is there a way to set a cookie as the value of a variable?

You can find the answer to your question here: http://stackoverflow.com/questions/13154552/javascript-set-cookie-with-expire-time — LolWalid, Mar 11 '15 at 02:06
this MDN doc will help. https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#Library — naveen, Mar 11 '15 at 02:51

score 1 · Accepted Answer · answered Mar 11 '15 at 02:37

1

The method you are using for setting the cookie is correct but at start the values are not showing because there are no cookies. Remember that you only can access the cookies set by your site so at start there aren't any. You can add a test cookie to see that your code is working like in the following example, also it shows how to update the value of the cookie when the select is changed as you asked:

<script>
function checkCookies(){
    document.cookie="Test=Test Cookie; expires=Fri, 13 Mar 2015 12:00:00 UTC";
    document.getElementById("div").innerHTML = document.cookie;
}
function updateCookies(val) {
    document.cookie="mediaType="+ val +"; expires=Fri, 13 Mar 2015 12:00:00 UTC";
    document.getElementById("div").innerHTML = document.cookie;
}
</script>

<body onload="checkCookies()">
  <select onChange="updateCookies(this.value)">
    <option value="image">Image</option>
    <option value="link">Link</option>
    <option value="text">Text</option>
  </select>

  <div id="div"> hi</div>

</body>

answered Mar 11 '15 at 02:37

Diego López

1,559
1
19
27

When I used your code with `document.cookie="Test=Test Cookie; expires=Fri, 13 Mar 2015 12:00:00 UTC";` the div wouldn't display the cookie. When I took out the "expires" part and only used `document.cookie="Test=Test Cookie; ` the div would display the cookie. How can I get the cookie to be displayed and have an expiration date? – Thomas M Mar 11 '15 at 02:56
Is not that simple to retrieve the expiracy date as it is for the value since is not stored on document.cookie property, check out this question it has a work around tip http://stackoverflow.com/questions/3274875/how-to-get-cookie-expiration-date-creation-date-from-javascript – Diego López Mar 11 '15 at 03:03
I'm not trying to retrieve the expiracy date. When I put in your code the output doesn't display the cookie names "test" or the cookie named "mediaType". Here's a screenshot of what I'm seeing [http://s27.postimg.org/a65gf6zur/screen_shot.png](http://s27.postimg.org/a65gf6zur/screen_shot.png) (sorry I must have been unclear) – Thomas M Mar 11 '15 at 03:09
Your code seems to be working fine in Internet Explorer and Firefox, but in Google Chrome it won't display the cookies "test" or "mediaType" when they have expiration dates. How do I fix this? – Thomas M Mar 11 '15 at 20:30

How to set a cookie's expiration date in Javascript

1 Answers1