How to use HTML5 local storage with jQuery Mobile

In this post we’ll see how to use HTML5 local storage with jQuery Mobile.

It’s really easy to use local storage with mobile browsers

you can set a value like this

localStorage.setItem(key, value);

and get a value like this

localStorage.getItem(key);

How do you know if a mobile browser supports local storage?

Using Modernizer it’s easy to check if a browser supports local storage.

The code below shows an example how you could detect if local storage is supported or not.

if (Modernizr.localstorage) {
    // good times
}
else {
    // bad times
}

The good news is there are plenty of polyfills and third party libraries that provide storage support on mobile browsers that don’t natively support it.

To see an example of how to do this check out the post ‘’.

An example of using HTML5 local storage with jQuery Mobile

In this example we’ll store the text user enters in local storage.

The first thing to do is check if a browser supports local storage.

If it doesn’t we display a message to the user and disable the add button.

This can be done using the code below.

if (Modernizr.localstorage) {
    showStoreValue();
}
else {
    $('#message').text("Unfortunately your browser doesn't support local storage");
    $('#addToStorage').attr('disabled', 'disabled');
    $('#message').show();
}

Now if a browser visits the page and doesn’t support local storage they will see the following message.

The picture is just for illustrative purposes the iPhone does actually support local storage.

local storage not supoorted

The code to store the text value in local storage when the ‘Add to local storage’ button is clicked is shown below.

$('#addToStorage').click(function(e) {
    localStorage.setItem(localStorageKey, $('#entry').val());
    showStoreValue();
    e.preventDefault();
});

Before we display the value in local storage to the user, we need to check if a value exists and isn’t an empty string.

function showStoreValue() {
    var item = localStorage.getItem(localStorageKey);
    if (item == null) {
        item = 'Nothing in store';
    }
    else if (item.length === 0) {
        item = 'Store contains empty value';
    }
    $('.storeItem').text(item);
}

Using the developer tools in Google Chrome to see what’s in local storage

If you open this demo page using a Google Chrome you can use the developer tools to check what is in local storage by going to Resources > Local Storage

Chrome developer tools local storage

The complete code listing used for the demo is shown below

<!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="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
    <script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
    <style>
        #message {
            display: none;
            border-radius: 10px;
            padding: 10px;
            background-color: #ff0000;
            color: #fff;
        }

        #storageDemoPage h2 {
            white-space: normal;
        }
    </style>
    <script type="text/javascript">
        var localStorageKey = "demoStorageKey";
        $('#storageDemoPage').live('pagecreate', function() {
            if (Modernizr.localstorage) {
                showStoreValue();
            }
            else {
                $('#message').text("Unfortunately your browser doesn't support local storage");
                $('#addToStorage').attr('disabled', 'disabled');
                $('#message').show();
            }
            $('#addToStorage').click(function(e) {
                localStorage.setItem(localStorageKey, $('#entry').val());
                showStoreValue();
                e.preventDefault();
            });
        });

        function showStoreValue() {
            var item = localStorage.getItem(localStorageKey);
            if (item == null) {
                item = 'Nothing in store';
            }
            else if (item.length === 0) {
                item = 'Store contains empty value';
            }
            $('.storeItem').text(item);
        }
    </script>
</head>
<body>
<section data-role="page" id="storageDemoPage">
    <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>
</body>
</html>

To learn more about HTML5 local storage read this page on the dive into HTML5 site.


Share



Comments

Comments are closed.