Speed up development with full-stack environments for every branch.

Learn More

Basic usage of jQuery-cookie.js [JavaScript]

Forked from How to use the jQuery $().ready function.

2541 Runs 15459 Views 5235 Copies

How to use set / get / remove cookie using jQuery-cookie.js ?



manikjindal 35

published 4 years ago

  <meta charset="utf-8">
  <title>jquery-cookie - Basic Usage</title>
  <!-- Bootstrap CSS Toolkit styles -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">

<div class="container">
  <h2>Basic usage</h2>
  <!-- Notes -->
  <div class="block">
		  <li><b><i>$.cookie(cookieName, cookieValue)</i></b> - Sets the cookie.</li>
		  <li><b><i>$.cookie(cookieName)</i></b> - If cookie is accessible by the current page, value of cookie will be returned. undefined otherwise.</li>
		  <li><b><i>$.removeCookie(cookieName)</i></b> - Removes the cookie. If successful(i.e. cookie accessible and removed) true will be returned, false otherwise.</li>
  <div class="block">
	  <h3>Actions to perform:</h3>
		  <li>Set cookie.</li>
		  <li>Get cookie.</li>
		  <li>Remove cookie.</li>
		  <li>Get cookie.</li>
	  Keep an eye on the status bar while performing actions.
  <!-- Button to set the cookie -->
  <span class="btn btn-success input-button">
    <span>Set Cookie</span>
    <input id='setCookie' type='button' value='Set Cookie' onclick='setCookie()'/>
  <!-- Button to get the cookie -->
  <span class="btn btn-success input-button">
    <span>Get Cookie</span>
    <input id='getCookie' type='button' value='Get Cookie' onclick='getCookie()'/>
  <!-- Button to remove the cookie -->
  <span class="btn btn-success input-button">
    <span>Remove Cookie</span>
    <input id='removeCookie' type='button' value='Remove Cookie' onclick='removeCookie()'/>
  <!-- Status bar -->
  <p>Status bar:</p><span id='statusBar'></span>

  <!-- Load jQuery and jquery-cookie. Make sure jquery.js is listed before jquery.cookie.js -->
  <script src='js/jquery.js'></script>
  <script src='js/jquery.cookie.js'></script>
  <!-- JavaScript used to perform actions on cookie -->
		function log(status)
			var span = document.getElementById('statusBar');

				span.removeChild( span.firstChild );
		// Name of the cookie on which all the actions will be performed.
		var cookieName = 'ex1ck_1';

		function setCookie()
			// value to set in the cookie
			var cookieValue = 'example1 cookie';
			// sets the cookie
			$.cookie(cookieName, cookieValue);
			log('Cookie ' + cookieName + ' has been set.');
		function getCookie()
			// gets the cookie value if cookie is accessible from the current page
			var cookieValue = $.cookie(cookieName);
			log(cookieName + ' = \'' + cookieValue + '\'');
		function removeCookie()
			// Remove the cookie
			// It won't generate any errors, if cookie does not exist.
			var isRemoved = $.removeCookie(cookieName);
			if (isRemoved)
				log('Cookie ' + cookieName + ' has been removed.');
				log('Cookie ' + cookieName + ' not removed.');
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).