In the previous recipe, we used some basic JavaScript to perform a rudimentary check to see if the Local Storage or Session Storage support is enabled. Since this works, it is not infallible. As part of this recipe, we will use Modernizr to perform a check that is more reliable, and which works better with the advent of HTML5 functionality.
For this recipe, we will need some icons—one cross and one checkmark—in addition to a normal text editor of your choice. A good source is the silk icons available from FAMFAMFAM at http://www.famfamfam.com/lab/icons/silk/. For the purposes of this recipe, I will assume you've downloaded and are using the icons from this library.
For improving detection using Modernizr, perform the following steps:
- Let's begin by creating our base template. Save the following code snippet as a new HTML document, calling it
modernizr.html:<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta content="charset=utf-8"> <script src="http://code.jquery.com/jquery-latest.js"> </script> <script src="http://www.modernizr.com/downloads/ modernizr-latest.js"></script> <style type="text/css"> </style> </head> </head> <body> </body> </html> - Next comes the base dialog message, which we will use to confirm if support for Local Storage or Session Storage is available:
<body> <div id="supportdlg"> <div id="details"> <div id="localtxt">LocalStorage is not supported or javascript is disabled</div> <div id="sessiontxt">SessionStorage is not supported or javascript is disabled</div> </div> </div> </body> - We need to add some styling, which includes the fallback properties, in the event that Modernizr is not available:
<style type="text/css"> body { padding: 20px; font-family: Arial; font-size: 16px; } #localtxt { margin: 5px; } #sessiontxt { margin: 5px; } #details { border-radius: 4px; padding: 5px;} supported { background-image:url('tick.png'), background-repeat: no-repeat; padding-left: 25px; background-color: green; } notsupported { background-image:url('cross.png'), background-repeat: no-repeat; padding-left: 25px; background-color: red; } #supportdlg { border-radius: 4px; border: 1px solid black; padding: 5px; width: 500px; color: #fff; font-weight: bold; } no-js #supportdlg { background-color: red; border: 1px solid black; } /* No JavaScript Fallback for Modernizr */ </style> - Finally, we need to provide the glue that will perform the check for the support. We begin with the check for Local Storage, which displays the result on the screen:
<script> if(Modernizr.localstorage){ $('#localtxt').html("LocalStorage is supported"); $('#localtxt').removeClass().addClass("supported"); $('#details').css("background-color", "green"); } else { $('#localtxt').html("LocalStorage is not supported"); $('#localtxt').removeClass().addClass("notsupported"); $('#details').css("background-color", "red"); } - We then add the check for
sessionStorage, to confirm if our browser supports Session Storage. It displays the appropriate result based on the outcome:if(Modernizr.sessionstorage){ $('#sessiontxt').html("SessionStorage is suppported"); $('#sessiontxt').removeClass().addClass("supported"); $('#details').css("background-color", "green"); } else { $('#sessiontxt').html("SessionStorage is not suppported"); $('#sessiontxt').removeClass(). addClass("notsupported"); $('#details').css("background-color", "red"); } </script> - If all is well, you will see the result as shown in the following screenshot, when previewing it in a browser:
We kick off this recipe by hooking in Modernizr and jQuery. Then add some styles that will be used as part of displaying the results of the status check. We also include a base set of DIVs that will always show if both JavaScript and Modernizr are not available.
The key to this recipe is in the first line of the script:
if(Modernizr.localstorage){This performs a check using Modernizr, to confirm if a browser is capable of supporting a feature, such as Local Storage or Session Storage. If it is, we alter the styles and text assigned to the localtxt and sessiontxt DIVs accordingly.
The beauty of using Modernizr in instances such as these is its ability to automatically add styling hooks that you can use to cater for instances when a feature is or isn't supported. It shuns the user agent sniffing technique that was popular when the Internet first came into (mainstream) existence, in preference to working out if a browser is able to support a particular feature. It adds a number of style rules in the header and alters any that relate to unsupported technologies:
You can then use these styles accordingly, depending on what is provided by Modernizr.
If you want to confirm that Modernizr is indeed working, you can switch off DOM Storage in your browser. The preceding code will display the following result:
If, however, JavaScript is not even enabled, you will see the following result:
A small thing to note is that while Modernizr makes providing fallback support very easy, you should always ask yourself the question, "if I'm using Modernizr, should I be using Modernizr?" Modernizr can add some overhead, as it always loads both normal and fallback content, scripts, and styles; you can reduce the impact of this by using the conditional loader script Yesnope.js, which comes bundled with Modernizr, or is available standalone from http://www.yesnope.com. It may not make a difference in a small example such as ours, but will have a significant impact on much larger sites!
Now, it's good talking about checking for whether a browser supports Local Storage, but what happens if it doesn't? Thankfully, it is easy to fix. Let's take a look at store.js, which provides a good fallback for those browsers that don't support Local Storage natively, as part of the next recipe.