How to Use Cookie & HTML5 localStorage

In a previous post, Jake shared a tutorial on building a step-by-step guide using Intro.js. One of our readers posed a question, asking how they can make the guide appear only once. In other words, once a user has completed the guide, the guide will not appear again in subsequent visits by the same user.

There are numerous ways to achieve this, but in this tutorial, we’ll just be using Cookie and localStorage. Briefly speaking, both Cookie and localStorage store some information in the browser, which can be used to determine whether to display the step-by-step guide or not.

Let’s get started, shall we?

Recommended Reading: HTML5 Contenteditable Attribute â€" Edit Web Content On Front-end

Using Cookie

We will use the jQuery Cookie plugin to make the code look simpler. Download jQuery Cookie here, and put it in your HTML document along with jQuery, like so.

  <script src="jquery.js"></script>
  <script src="jquery.cookie.js"></script>
  

Then, we need to specify the name of our Cookie and also retrieve its value, which will be used later as reference when we run the IntroJs function.

In this example, we will name the Cookie IntroJS and store it in a variable called name while the value will be stored in a variable called value.

  var name = 'IntroJS';
  var value = $.cookie(name);
  

Next, using the .oncomplete() method that is provided in IntroJS, we can set a Cookie in the browser. Using the following code as an example, once the user has clicked the Done button on the tooltip, a Cookie named IntroJS will be created with the value of one.

  introJs().start().oncomplete(function() {
  	$.cookie(name, 1);
  }
  

Now, refresh the browser and complete the the guide. If you are using Google Chrome, just go to View > Developer > Developer Tools > Resources (Tab) â€" you can see that a Cookie has been created (screenshot).

As previously mentioned, we do not want the guide to appear again to users who have already completed the guide before. To do that, wrap the IntroJS function with a conditional function to run IntroJS function only if the Cookie named IntroJS is not set in the browser.

  if(value == null) {
  	introJs().start().oncomplete(function() {
  		$.cookie(name, 1);
  	}
  };
  

However, the downside of using Cookie is that it will expire. Unless explicitly specified, the Cookie will become a Session Coookie, which means that it will be deleted when the user closes the browser.

Even if the expiration time is specified, this is still also not an ideal solution as the Cookie will still be removed eventually. So, let us now take a look at a second (better) solution, i.e. using localStorage.

Using HTML5 localStorage

Briefly speaking, localStorage works somewhat like a database; it stores some pieces of data â€" key and value â€" locally on the user’s browser, which then can be retrieved using JavaScript API. Unlike Cookie, localStorage is persistent.

The data will always be available inside the user’s browser, even after the user has closed the browser. localStorage also accepts more data than Cookies.

To get started, Let’s first set the key name and value. For your information, we use .getItem() to retrieve the value from a localStorage key.

  var name = 'IntroJS';
  var value = localStorage.getItem(name);
  

Similar to our first example with Cookie, we will run the IntroJS function only when there’s no specified data. In other words, once the data has been set, the guide should not appear. Using localStorage, we can set the data with .setItem(), like so.

  if(value == null) {
  	introJs().start().oncomplete(function() {
  		localStorage.setItem(name, 1)
  	});
  };
  

Now, refresh your browser and complete the step-by-step guide. Then, go to View > Developer > Developer Tool > Resources (Tab) â€" in the LocalStorage section, you should find a new key and that its value has already been set.

Please note that localStorage is a relatively new technology â€" according to CanIUse.com, localStorage is only supported (at the time of this writing) in the following browsers: IE8+, Firefox 3.5+, Chrome 4.0+, Safari 4.0+, and Opera 10.5+.

If, for any reason, you need to cater to users with older browsers, you can use localStorage in conjunction with Cookies. Here is a sample code:

  var name = 'IntroJS';
  var value = localStorage.getItem(name) || $.cookie(name);
  var func = function() {
  		if (Modernizr.localstorage) {
  			localStorage.setItem(name, 1)
  		} else {
  		  	$.cookie(name, 1, {
  				expires: 365
  			});
  		}
  	};
  if(value == null) {
  	introJs().start().oncomplete(func).onexit(func);
  };
  

This code uses Modernizr to detect the browser’s features. It will use localStorage if the browser supports it; otherwise, it will resort to using Cookies.

And that’s it, folks. We hope that you have found this tutorial helpful. For further reference, you can have a look at our previous tutorial on Modernizr.