By omg


2009-09-22 08:09:50 8 Comments

How do I set and unset a cookie using jQuery, for example create a cookie named test and set the value to 1?

12 comments

@Kazar 2009-09-22 08:11:20

Update April 2019

jQuery isn't needed for cookie reading/manipulation, so don't use the original answer below.

Go to https://github.com/js-cookie/js-cookie instead, and use the library there that doesn't depend on jQuery.

Basic examples:

// Set a cookie
Cookies.set('name', 'value');

// Read the cookie
Cookies.get('name') => // => 'value'

See the docs on github for details.


See the plugin:

https://github.com/carhartl/jquery-cookie

You can then do:

$.cookie("test", 1);

To delete:

$.removeCookie("test");

Additionally, to set a timeout of a certain number of days (10 here) on the cookie:

$.cookie("test", 1, { expires : 10 });

If the expires option is omitted, then the cookie becomes a session cookie and is deleted when the browser exits.

To cover all the options:

$.cookie("test", 1, {
   expires : 10,           // Expires in 10 days

   path    : '/',          // The value of the path attribute of the cookie
                           // (Default: path of page that created the cookie).

   domain  : 'jquery.com', // The value of the domain attribute of the cookie
                           // (Default: domain of page that created the cookie).

   secure  : true          // If set to true the secure attribute of the cookie
                           // will be set and the cookie transmission will
                           // require a secure protocol (defaults to false).
});

To read back the value of the cookie:

var cookieValue = $.cookie("test");

You may wish to specify the path parameter if the cookie was created on a different path to the current one:

var cookieValue = $.cookie("test", { path: '/foo' });

UPDATE (April 2015):

As stated in the comments below, the team that worked on the original plugin has removed the jQuery dependency in a new project (https://github.com/js-cookie/js-cookie) which has the same functionality and general syntax as the jQuery version. Apparently the original plugin isn't going anywhere though.

@bogdan 2013-01-07 03:57:41

from the changelog: "$.removeCookie('foo') for deleting a cookie, using $.cookie('foo', null) is now deprecated"

@johntrepreneur 2013-06-01 01:45:59

Plugin works great, expect its only storing a session cookie on the latest version of Opera as of 5-31-13 (v12.15). Persistent cookies works in IE, Chrome, FF, and Safari, but just not Opera.

@gibberish 2013-06-14 20:21:24

To test if a cookie is set: var mytest = $.cookie('nameofcookie'); <br> if (typeof mytest === "undefined") { alert("cookie mytest not set") }

@Andrei Cristian Prodan 2013-07-01 18:24:51

of course this doesn't work for mobile phones

@Kazar 2013-07-02 08:26:35

@AndreiCristianProdan - Doesn't it? Why not? I can't imagine the behaviour would be any different.

@Andrei Cristian Prodan 2013-07-02 12:13:17

@Kazar I spent 6 hours, no breaks. I finally realized the problem this morning. I'm using this with phonegap, on the site it works with no problems, but on the device, when you try to retrieve the cookie which has a JSON, it's already an object, so if you try to JSON.parse it, it will give a JSON parse error. Solved it with an "if typeof x == 'string'" do the JSON.parse, else, just use the object. 6 goddamn hours looking for the error in all the wrong places

@LessQuesar 2013-08-10 00:58:31

when removing the cookie, make sure to also set the path to the same path as you set the cookie originally: $.removeCookie('nameofcookie', { path: '/' });

@Jithin Jose 2013-08-26 05:28:48

I set cookie using. document.cookie but it is not working. stackoverflow.com/questions/18429234/… is this plugin help?. the cookie will expire in minutes.

@Christopher Stevenson 2013-08-26 17:33:22

When including a cross-site javascript (from a sub-domain), does the path and domain default to the page, or the script's site?

@Jonny 2014-05-04 07:34:59

If you can't get or set a cross-domain cookie, then what's the domain property you are passing for, subdomains?

@Fagner Brack 2015-04-21 18:06:56

It's 2015 and we are still receiving more than 2k unique hits per week in jquery-cookie repository just from this answer. A couple of things we can learn from that: 1. cookies are not going to die soon and 2. People still google for a "jquery plugin to save the world". jQuery is NOT necessary for handling cookies, jquery-cookie is being renamed to js-cookie (github.com/js-cookie/js-cookie) and jquery dependency was made optional in version 1.5.0. There will be a version 2.0.0 with a lot of interesting stuff, it's worth take a look and contribute, thx!

@Kazar 2015-04-22 07:28:25

@FagnerBrack Are you leaving the original project up so that people can still find it? I've added a note at the end of the answer saying that the project is being moved, but would also like to be able to say that people don't need to worry about it going away.

@Fagner Brack 2015-04-22 16:15:56

@Kazar We are not planning to physically move it, there is a considerable amount of overall traffic to that URL from several sources and Klaus is the historic owner of the "jquery-cookie" namespace. There's no need to worry for that URL being gone anytime soon. But still, I would encourage everyone to start watching the new repository for updates.

@S1awek 2018-03-09 14:46:06

Here is how you set the cookie with JavaScript:

below code has been taken from https://www.w3schools.com/js/js_cookies.asp

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

now you can get the cookie with below function:

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

And finally this is how you check the cookie:

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

If you want to delete the cookie just set the expires parameter to a passed date:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

@Hasan Badshah 2018-08-09 22:09:43

$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie

@freeworlder 2018-07-03 14:36:21

I thought Vignesh Pichamani's answer was the simplest and cleanest. Just adding to his the ability to set the number of days before expiration:

EDIT: also added 'never expires' option if no day number is set

        function setCookie(key, value, days) {
            var expires = new Date();
            if (days) {
                expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
                document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
            } else {
                document.cookie = key + '=' + value + ';expires=Fri, 30 Dec 9999 23:59:59 GMT;';
            }
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }

Set the cookie:

setCookie('myData', 1, 30); // myData=1 for 30 days. 
setCookie('myData', 1); // myData=1 'forever' (until the year 9999) 

@barmyman 2015-06-03 15:53:24

I think Fresher gave us nice way, but there is a mistake:

    <script type="text/javascript">
        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
            document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }
   </script>

You should add "value" near getTime(); otherwise the cookie will expire immediately :)

@Peter 2015-06-03 17:34:29

"value" could be a string. In the question he's using 1 as an example. Value should be what the key is equal to, not the length in days before the cookie expires. If value were passed in as "foo" your version would crash.

@user890332 2014-09-01 15:26:45

Make sure not to do something like this:

var a = $.cookie("cart").split(",");

Then, if the cookie doesn't exist, the debugger will return some unhelpful message like ".cookie not a function".

Always declare first, then do the split after checking for null. Like this:

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");

@Peter Mortensen 2018-01-08 12:59:49

The sample code is not complete. Is it only a single } that is missing or are there several lines of code missing?

@user890332 2018-01-09 18:09:10

It's just a singe } missing, but obviously you will need to add more lines of code to continue what you want to do with the split.

@Russ Cam 2009-09-22 13:40:59

There is no need to use jQuery particularly to manipulate cookies.

From QuirksMode (including escaping characters)

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0)
            return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Take a look at

@Svetoslav Marinov 2011-01-18 14:49:20

Hi Russ, the good thing about jquery cookie is that it escapes the data

@Russ Cam 2011-01-18 18:03:04

@lordspace - Just wrap the value in window.escape/unescape to write/retrieve the cookie value, respectively :)

@SDC 2012-07-11 14:03:19

Better cookie code can be found here: developer.mozilla.org/en/DOM/document.cookie

@Oliver 2013-05-14 16:11:59

@SDC: Would that code from mozilla work in all major browsers?

@SDC 2013-05-31 12:59:33

@Oliver - yes it would. Nothing browser specific there.

@Alex W 2013-11-26 20:00:28

JSHint complains that expires was already defined and === was not used to compare with 0 and ' '.

@Russ Cam 2013-11-26 22:20:44

@AlexW Thanks, Fixed!

@brauliobo 2014-06-01 14:28:45

the jQuery cookie plugin is much simpler

@Rodislav Moldovan 2014-10-25 17:43:05

instead of escape or unescape you can use encodeURI or decodeURI

@Fagner Brack 2015-04-21 18:05:52

This solution is not going to work, encodeURIComponent can erroneously encode characters that are allowed in cookie-value or cookie-name according to the RFC 6265: github.com/js-cookie/js-cookie/pull/20#issuecomment-94453407‌​. That can cause trouble for removing a cookie using third party solutions that expect some characters not to be encoded in the cookie-name.

@seanjacob 2016-10-26 09:43:12

Here is my global module I use -

var Cookie = {   

   Create: function (name, value, days) {

       var expires = "";

        if (days) {
           var date = new Date();
           date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
           expires = "; expires=" + date.toGMTString();
       }

       document.cookie = name + "=" + value + expires + "; path=/";
   },

   Read: function (name) {

        var nameEQ = name + "=";
        var ca = document.cookie.split(";");

        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == " ") c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    },

    Erase: function (name) {

        Cookie.create(name, "", -1);
    }

};

@user177016 2009-09-22 08:43:22

You can use a plugin available here..

https://plugins.jquery.com/cookie/

and then to write a cookie do $.cookie("test", 1);

to access the set cookie do $.cookie("test");

@Andrei Cristian Prodan 2013-07-01 18:24:15

there's a newer version of that plugin

@Fagner Brack 2015-04-21 17:46:31

It was renamed to github.com/js-cookie/js-cookie

@Moustafa Samir 2015-08-09 19:53:53

You can use the library on Mozilla website here

You'll be able to set and get cookies like this

docCookies.setItem(name, value);
docCookies.getItem(name);

@Vignesh Pichamani 2013-09-06 07:40:33

<script type="text/javascript">
        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
            document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }
</script>

You can set the cookies as like

setCookie('test','1');

You can get the cookies as like

getCookie('test');

Hope it will helps to someone :)

EDIT:

If you want to save path of cookie for homepage alone then do this like

function setCookie(key, value) {
                var expires = new Date();
                expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
                document.cookie = key + '=' + value +';path=/'+ ';expires=' + expires.toUTCString();
            }

Thanks, vicky

@Vignesh Pichamani 2013-09-30 16:18:05

60 * 1000 = 60 second 60* (60 * 1000) = 60 mins which is 1 hour 24* (60* (60 * 1000)) = 1 day which 24 hours Hope it helps.

@Vignesh Pichamani 2013-09-30 16:20:28

1 * 24 * 60 * 60 * 1000 customize 1 for 1 day or u can do 365

@Dss 2014-04-23 19:24:26

Good functions... But why are they inside of a document.ready tag?

@Fagner Brack 2015-04-21 18:14:07

This is not going to work in Safari or IE for any characters outside the ASCII range, such as é, , etc. Also, this is not going to work for some special characters that are not allowed in the cookie-name or cookie-value. I recommend the following reference: tools.ietf.org/html/rfc6265

@Yordan Georgiev 2015-12-22 13:26:18

no plugins mess - the best answer !!!

@Webpixstudio 2013-08-06 17:47:18

A simple example of set cookie in your browser:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jquery.cookie Test Suite</title>

        <script src="jquery-1.9.0.min.js"></script>
        <script src="jquery.cookie.js"></script>
        <script src="JSON-js-master/json.js"></script>
        <script src="JSON-js-master/json_parse.js"></script>
        <script>
            $(function() {

               if ($.cookie('cookieStore')) {
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              }

              $('#submit').on('click', function(){

                    var storeData = new Array();
                    storeData[0] = $('#inputName').val();
                    storeData[1] = $('#inputAddress').val();

                    $.cookie("cookieStore", JSON.stringify(storeData));
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              });
            });

       </script>
    </head>
    <body>
            <label for="inputName">Name</label>
            <br /> 
            <input type="text" id="inputName">
            <br />      
            <br /> 
            <label for="inputAddress">Address</label>
            <br /> 
            <input type="text" id="inputAddress">
            <br />      
            <br />   
            <input type="submit" id="submit" value="Submit" />
            <hr>    
            <p id="name"></p>
            <br />      
            <p id="address"></p>
            <br />
            <hr>  
     </body>
</html>

Simple just copy/paste and use this code for set your cookie.

@Fagner Brack 2015-04-21 18:01:04

Just a note, the browser by default cache the resources according to their filenames. In this example, jquery-1.9.0.min.js will be reloaded for everybody when the filename is updated to jquery-1.9.1.min.js, otherwise the browser will NOT make a request to the server at all to check for updated content. If you update the code inside jquery.cookie.js without changing it's filename, then it may NOT be reloaded in browsers that already cached the jquery.cookie.js resource.

@Fagner Brack 2015-04-21 18:01:14

If you are writing a website and copying/pasting this, be aware that this is not going to work if you update jquery.cookie.js version without changing it's filename (unless your server deal with caching using E-Tags).

@Mohammad Javad 2018-06-21 06:19:16

if ($.cookie('cookieStore')) { var data=JSON.parse($.cookie("cookieStore")); // when load page in different page not found $('#name').text(data[0]); $('#address').text(data[1]); }

Related Questions

Sponsored Content

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

31 Answered Questions

73 Answered Questions

[SOLVED] How can I get query string values in JavaScript?

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

60 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

30 Answered Questions

[SOLVED] Get current URL with jQuery?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

33 Answered Questions

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

Sponsored Content