javascript - How do I set/unset a cookie with jQuery?

ID : 925

viewed : 167

Tags : javascriptjquerydomcookiesjavascript

Top 5 Answer for javascript - How do I set/unset a cookie with jQuery?

vote vote

100

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.

vote vote

82

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

vote vote

76

<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

vote vote

62

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

vote vote

58

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

Top 3 video Explaining javascript - How do I set/unset a cookie with jQuery?

Related QUESTION?