Great! We've looked at Session Storage and Local Storage, and learnt how we can use both to store information in the browser rather than having to push it back to the server.
There's one thing wrong with the preceding statement. The more observant amongst you would have noted from my earlier comments that while browser support is actually very good, it still isn't supported in older browsers!
After all, it is a part of the HTML5 specification, which has naturally only been available over the last few years, and has garnered support from the more recent browsers. While we can't retrofit support to older browsers, we can at least implement a basic check for it, which is the subject of our next task.
This is a simple recipe for which you will need a copy of the code from the Basic demo of Session Storage recipe discussed earlier in this book, along with a normal text editor of your choice.
The following steps illustrate how to perform a basic detection for storage support:
- Let's make a start by opening a copy of the
sessionStoragedemo, which we created earlier in this chapter. The first part of the code remains as it is. Alter the next part of the code as follows:$("#clickCounter").click(function () { if (typeof(Storage)!=="undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount=Number (sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } $("#result").html("You have clicked the button " + sessionStorage.clickcount + " time(s)."); } else { $("#result").html("Sorry, your browser does not support web storage..."); } }); }); </script> - The rest of the code remains as it is, from the previous task:
</head> <body> <p><button id="clickCounter" type="button"> Click me!</button></p> <div id="result"></div> <p>Click the button to see the counter increase.</p> <p>Close the browser tab (or window), and try again, and the counter is reset.</p> </body> </html> - To show this in action, save your changes to a new file called
ssnotsupported.htmlwithin thewwwfolder of your local web server. - Fire up IE, then activate IE's Developer toolbar, and change the user agent to mimic IE 7:
- Browse to your page, and then try clicking on the button to start the count. You will see that it fails, as although we are using IE 9, the change of user agent forces IE to think as it is IE 7; Location Storage isn't supported in IE 7:
Although the change we've made is a simple one, it is critical for the successful use of Local Storage. We still live in an age when older browsers such as IE 6 have to be used. We've adapted the sessionStorage code from a previous task to perform a simple JavaScript-based check to ensure that the code only runs if it is supported in the browser being used. In this instance, although we tested the code in IE 9, we forced it to act as if it was IE 7. The check correctly identified this and displayed the appropriate message.
This does beg one question, is it really necessary to do this? The answer is unfortunately yes, at least until older browsers such as IE 6 have been put out to pasture. Microsoft's website (http://www.iecountdown.com) currently has this true for 6 percent of users worldwide. Once this drops below 1 percent, we can comfortably discard the need to support these browsers!
Using JavaScript's typeof() keyword forces you to manually provide every eventuality. A better option would be to use the power of Modernizr to provide CSS hooks that you can then style to your heart's content. Modernizr supports checking for a wide variety of functionality, based on what the browser can handle, and not its user agent string (which can be faked and therefore be unreliable). We're going to take a look at how you can use it to better detect support for Local and Session Storage, as part of the next recipe.