1356

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

0

18 Answers 18

1890
+50

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.


Before April 2019 (old)

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");

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.

14
  • 1
    from the changelog: "$.removeCookie('foo') for deleting a cookie, using $.cookie('foo', null) is now deprecated"
    – bogdan
    Commented Jan 7, 2013 at 3:57
  • 74
    @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 Commented Jul 2, 2013 at 12:13
  • 13
    when removing the cookie, make sure to also set the path to the same path as you set the cookie originally: $.removeCookie('nameofcookie', { path: '/' });
    – LessQuesar
    Commented Aug 10, 2013 at 0:58
  • 34
    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! Commented Apr 21, 2015 at 18:06
  • 2
    @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. Commented Apr 22, 2015 at 16:15
453

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

9
  • 2
    Hi Russ, the good thing about jquery cookie is that it escapes the data Commented Jan 18, 2011 at 14:49
  • 2
    @lordspace - Just wrap the value in window.escape/unescape to write/retrieve the cookie value, respectively :)
    – Russ Cam
    Commented Jan 18, 2011 at 18:03
  • 47
    Better cookie code can be found here: developer.mozilla.org/en/DOM/document.cookie
    – SDC
    Commented Jul 11, 2012 at 14:03
  • 5
    the jQuery cookie plugin is much simpler
    – brauliobo
    Commented Jun 1, 2014 at 14:28
  • 1
    instead of escape or unescape you can use encodeURI or decodeURI Commented Oct 25, 2014 at 17:43
190
<script type="text/javascript">
    function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 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;
    }

    function eraseCookie(key) {
        var keyValue = getCookie(key);
        setCookie(key, keyValue, '-1');
    }

</script>

You can set the cookies as like

setCookie('test','1','1'); //(key,value,expiry in days)

You can get the cookies as like

getCookie('test');

And finally you can erase the cookies like this one

eraseCookie('test');

Hope it will helps to someone :)

EDIT:

If you want to set the cookie to all the path/page/directory then set path attribute to the cookie

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

Thanks, vicky

5
  • 1
    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. Commented Sep 30, 2013 at 16:18
  • 1
    1 * 24 * 60 * 60 * 1000 customize 1 for 1 day or u can do 365 Commented Sep 30, 2013 at 16:20
  • 1
    Good functions... But why are they inside of a document.ready tag?
    – Dss
    Commented Apr 23, 2014 at 19:24
  • 1
    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 Commented Apr 21, 2015 at 18:14
  • 2
    Best of the best answer Commented Mar 8, 2021 at 12:39
19

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");

1
14

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);
    }

};
10

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(",");
2
  • The sample code is not complete. Is it only a single } that is missing or are there several lines of code missing? Commented Jan 8, 2018 at 12:59
  • 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.
    – user890332
    Commented Jan 9, 2018 at 18:09
9

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=/;";
0
7

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.

3
  • 1
    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. Commented Apr 21, 2015 at 18:01
  • 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). Commented Apr 21, 2015 at 18:01
  • 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]); } Commented Jun 21, 2018 at 6:19
5

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);
3

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 :)

1
  • 2
    "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.
    – Peter
    Commented Jun 3, 2015 at 17:34
2

Reducing the number of operations compared to previous answers, I use the following.

function setCookie(name, value, expiry) {
    let d = new Date();
    d.setTime(d.getTime() + (expiry*86400000));
    document.cookie = name + "=" + value + ";" + "expires=" + d.toUTCString() + ";path=/";
}

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

function eatCookie(name) {
    setCookie(name, "", -1);
}
2

How to use it?

//To set a cookie
$.cookie('the_cookie', 'the_value');

//Create expiring cookie, 7 days from then:
$.cookie('the_cookie', 'the_value', { expires: 7 });

//Create expiring cookie, valid across entire page:
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

//Read cookie
$.cookie('the_cookie'); // => 'the_value'
$.cookie('not_existing'); // => null

//Delete cookie by passing null as value:
$.cookie('the_cookie', null);

// Creating cookie with all availabl options
$.cookie('myCookie2', 'myValue2', { expires: 7, path: '/', domain: 'example.com', 
         secure: true, raw: true });

Available Options:

expires: Define lifetime of the cookie. Value can be a Number (which will be interpreted as days from time of creation) or a Date object. If omitted, the cookie is a session cookie.

path: Define the path where cookie is valid. By default the path of the cookie is the path of the page where the cookie was created (standard browser behavior). If you want to make it available for instance across the entire page use path: '/'.

domain: Domain of page where the cookie was created.

secure: Default: false. If true, the cookie transmission requires a secure protocol (https).

raw: By default the cookie is encoded/decoded when creating/reading, using encodeURIComponent/ decodeURIComponent. Turn off by setting raw: true.

2

Background

Cookies were originally invented by Netscape to give 'memory' to web servers and browsers. The HTTP protocol, which arranges for the transfer of web pages to your browser and browser requests for pages to servers, is state-less, which means that once the server has sent a page to a browser requesting it, it doesn't remember a thing about it. So if you come to the same web page a second, third, hundredth or millionth time, the server once again considers it the very first time you ever came there.

This can be annoying in a number of ways. The server cannot remember if you identified yourself when you want to access protected pages, it cannot remember your user preferences, it cannot remember anything. As soon as personalization was invented, this became a major problem.

Cookies were invented to solve this problem. There are other ways to solve it, but cookies are easy to maintain and very versatile.

How cookies work

A cookie is nothing but a small text file that's stored in your browser. It contains some data:

  • A name-value pair containing the actual data
  • An expiry date after which it is no longer valid
  • The domain and path of the server it should be sent to

Example

To set or unset cookies using Javascript, you can do the following:

// Cookies
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";               

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

function readCookie(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;
}
function setCookie(name, days) {
    createCookie(name, name, days);
}
function unsetCookie(name) {
    createCookie(name, "", -1);
}

You can access like below,

setCookie("demo", 1); // to set new cookie

readCookie("demo"); // to retrive data from cookie

unsetCookie("demo"); // will unset that cookie
1
  • are you kidding?! it's like the joke "I ask my grandpa what time it is and he goes on to tell me how clocks work"
    – mavili
    Commented Jun 16 at 7:06
1

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) 
1

I know there are many great answers. Often, I only need to read cookies and I do not want to create overhead by loading additional libraries or defining functions.

Here is how to read cookies in one line of javascript. I found the answer in Guilherme Rodrigues' blog article:

('; '+document.cookie).split('; '+key+'=').pop().split(';').shift()

This reads the cookie named key, nice, clean and simple.

1

Try (doc here, SO snippet not works so run this one)

document.cookie = "test=1"             // set
document.cookie = "test=1;max-age=0"   // unset
0

The following code will remove all cookies within the current domain and all trailing subdomains (www.some.sub.domain.com, .some.sub.domain.com, .sub.domain.com and so on.).

A single line vanilla JS version (no need for jQuery):

document.cookie.replace(/(?<=^|;).+?(?=\=|;|$)/g, name => location.hostname.split('.').reverse().reduce(domain => (domain=domain.replace(/^\.?[^.]+/, ''),document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`,domain), location.hostname));

This is a readable version of this single line:

document.cookie.replace(
  /(?<=^|;).+?(?=\=|;|$)/g, 
  name => location.hostname
    .split(/\.(?=[^\.]+\.)/)
    .reduceRight((acc, val, i, arr) => i ? arr[i]='.'+val+acc : (arr[i]='', arr), '')
    .map(domain => document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`)
);
0

I know, there are plenty of answers already, but here's one that has set, get, and delete all beautifully vanilla and nicely put into a global reference:

window.cookieMonster = window.cookieMonster || 
    {
        // https://stackoverflow.com/a/25490531/1028230
        get: function (cookieName) {
            var b = document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)');
            return b ? b.pop() : '';
        },

        delete: function (name) {
            document.cookie = '{0}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
                .replace('{0}', name);
        },

        set: function (name, value) {
            document.cookie =
                '{0}={1};expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/;SameSite=Lax'
                .replace('{0}', name)
                .replace('{1}', value);
        }
    };

Notice cookie getting regex was taken from this answer to a question in another castle.


And let's test:

cookieMonster.set('chocolate', 'yes please');
cookieMonster.set('sugar', 'that too');

console.log(cookieMonster.get('chocolate'));
console.log(document.cookie);

cookieMonster.delete('chocolate');

console.log(cookieMonster.get('chocolate'));
console.log(document.cookie);

If you didn't have any cookies before trying, should give you...

yes please
chocolate=yes please; sugar=that too

sugar=that too

Notice the cookies last not quite heat-death-of-the-universe long, but essentially that from our perspective. You can figure out how to change dates pretty easily from looking at the strings here or from other answers.

Not the answer you're looking for? Browse other questions tagged or ask your own question.