Providing support for the mobile platform (Should know)

So far we've concentrated on how we can use Local Storage within the confines of our site. However, more and more people are using the mobile platform as a means of surfing the web—this isn't a problem as Local Storage is supported in the mobile arena. We're going to have a look at how we can use it as part of this recipe.

Getting ready

For this recipe, you will need a few things in addition to your normal text editor:

I will assume you have saved local copies of the above libraries for this recipe. If you prefer, you can use the CDN equivalents; you will need to alter the code accordingly.

How to do it...

To provide support for the mobile platform, perform the following steps:

  1. Crack open your text editor, and save the following code as mobilelocalstorage.html:
    <!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile local storage demo</title>
    <meta name="viewport" content="width=device-width, 
    initial-scale=1">
    <link rel="stylesheet" 
    href="jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.3.min.js" 
    type="text/javascript"> </script>
    <script src="jquery.mobile-1.2.0.min.js" 
    type="text/javascript"></script>
    <script src="modernizr.js" 
    type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>
  2. We need to provide an interface where we can add items to the LocalStorage area. So go ahead and add the following code snippet in between the <body> tags:
    <section data-role="page" id="LocalStorageDemo">
  <section data-role="header">
    <h2>jQuery Mobile local storage demo</h2>
  </section>
  <section data-role="content">
    <p id="message"/>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Enter text to store</li>
      <li><input type="text" id="entry" name="entry" 
      placeholder="Enter text to store"/>
      <input type="button" id="addToStorage" 
      value="Add to local storage"/></li>
      <li data-role="list-divider">Item in store</li>
      <li class="storeItem"/>
    </ul>
  </section>
</section>
  3. For the page to work correctly, we need to make a couple of tweaks to the styling:
    <style>
  #message { display: none; border-radius: 10px; 
  color: #fff; padding: 10px; background-color: #ff0000; }
  #storageDemoPage h2 { white-space: normal; }
</style>
  4. Finally we need to tie the code together and provide the mechanism to add it to LocalStorage. Add the following code snippet into the <head> area of your code:
    <script type="text/javascript">
  $(document).ready(function() {
    var localStorageKey = "demoStorage";
    if (Modernizr.localstorage) {
      displayValue();
    } else {
      $('#message').text("Sorry, but your browser doesn't 
      support localstorage!").show();
      $('#addToStorage').attr('disabled', 'disabled'),
    }
    $('#addToStorage').click(function(e) {
      localStorage.setItem(localStorageKey, 
      $('#entry').val());
      displayValue();
      e.preventDefault();
    });
    function displayValue() {
      var item = localStorage.getItem(localStorageKey);
      if (item == null || item == 0) {
        item = 'Nothing in store, 
        or store has an empty value';
      }
      $('.storeItem').text(item);
    }
  });
</script>
  5. If all is well, you should get the result as shown in the following screenshot, when previewing in your browser:
    How to do it...

How it works...

A closer look at the code should show that there are no differences between a normal platform and a mobile one, when handling Local Storage. In this instance, we've used Modernizr and jQuery Mobile to check the compatibility and style the form for a mobile platform. We then added function calls to manage Local Storage; these functions are not different from those in the earlier examples, although here we have used jQuery to handle them, not pure JavaScript. The first method handles storing the content into Local Storage and then automatically updates the page to show the stored contents. The second function handles any instance where the storage or contents of the input field are empty.

Now that we have seen how we can use jQuery with Local Storage, let's focus on creating a simple plugin that you can use in your projects, 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