Providing fallback support (Should know)

In this recipe, we're going to take a look at how you can provide the fallback support, using the store.js library.

Getting ready

For this recipe, we'll need a copy of the open source store.js library, which is available from https://github.com/marcuswestin/store.js/archive/master.zip. We will also need a working installation of WAMP Server, or an available remote site, where we can upload the code. I will assume you're using WAMP Server, for the purposes of the demo. We will, of course, also need our trusty text editor!

How to do it...

Perform the following steps. for providing the fallback support:

  1. Let's begin with adding the following code to a new HTML document. Then, save it as fallback.html:
    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="storeout">
      <div id="details"></div>
    </div>
  </body>
</html>
  2. Go ahead and add the link into store+json2.min.js and some decorative CSS styles into your <head> tags:
      <script src="store+json2.min.js"></script>
  <style type="text/css">
    #storeout { border: 1px solid #000; padding: 5px; 
    margin-left: 5px; margin-top: 5px; width: 450px; }
    #details { background-color: #b80000; 
    font-weight: bold; font-family: Arial; color: #fff; }
    #details p { width: 325px; padding: 5px;}
  </style>
  3. We need to add a check to ensure whether LocalStorage as a fallback will work or not; if it does, we then set some values into LocalStorage, using store2.js:
    <script>
  if (store.enabled) {
    document.write("<p>LocalStorage is available!</p>");
    store.set('myage', 38);
    store.set('user', { name: 'Alex', likes: 'jquery' })
    document.write("<p>Hi my name is " + 
    store.get('user').name + " and I'm " + 
    store.get('myage') + " years old.</p>");
  } else {
    alert("Sorry, localStorage is not available.");
  }
</script>
  4. If all is well, you should see the following when previewing LocalStorage in a browser:
    How to do it...

How it works...

Store.js has been designed to work in a similar manner to LocalStorage, to the extent that it can almost be dropped in as a replacement for LocalStorage; it only requires some minor changes in the existing code to work.

We kick off our recipe with a call to the library. You will note that it includes a reference to json2; this is because LocalStorage expects to call a toString method on all information it is asked to store. This will prevent you from storing numbers, objects, and arrays. To get around this, we use JSON to convert the object to string before storing it. We then move into the main script, which sets a key called myage, into which it stores a numeric value; we also create an array called user, into which it stores my name and that I like jQuery! We then make references to both from the next call, as shown in the screenshot.

So far, we've now looked at how you can detect and provide support for most browsers; I am sure there will be one question you will want answered though, "what about the mobile platform?" It's a good question, one we can easily fix by looking at how Local Storage can be used on the mobile platform, as part of the next recipe.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset