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 ?

Saved

Saved

manikjindal 35

manikjindal
published 4 years ago

<!DOCTYPE HTML>
<html>
<head>
  <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">
</head>

<body>
<div class="container">
  <h2>Basic usage</h2>
  
  <!-- Notes -->
  <div class="block">
	  <h3>Functions:</h3>
	  <ul>
		  <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>
	  </ul>
  </div>
  
  <div class="block">
	  <h3>Actions to perform:</h3>
	  <ul>
		  <li>Set cookie.</li>
		  <li>Get cookie.</li>
		  <li>Remove cookie.</li>
		  <li>Get cookie.</li>
	  </ul>
	  Keep an eye on the status bar while performing actions.
  </div>
  
  <br/>
  <!-- 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()'/>
  </span>
  <!-- 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()'/>
  </span>
  <!-- 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()'/>
  </span>
  <br/>
  
  <!-- 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 -->
  <script>
		function log(status)
		{
			var span = document.getElementById('statusBar');

			while(span.firstChild)
				span.removeChild( span.firstChild );
			span.appendChild(document.createTextNode(status));
		}
		
		// 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.');
			else
				log('Cookie ' + cookieName + ' not removed.');
		}
	</script>
</div>
</body> 
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).