How to use Modernizr.localstorage?

557 views
Skip to first unread message

Rajesh Jain

unread,
Feb 28, 2012, 10:15:08 PM2/28/12
to phon...@googlegroups.com
I have a very strange problem.

I have a very simple example to test local storage on Android/Android Emulator and the localstorage doesn't work.

As I enter the text and hit submit, I cannot get the value to be stored in local storage.

Interestingly if I do console.log , it doesn't print anything.

Is this a jquery issue or a phonegap issue, where the script doesn't seem to getting executed. Am I missing something?

Please help....

thanks


<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile local storage demo</title>
    <script type="text/javascript" charset="utf-8" src="/js/phonegap-1.4.1.js"></script>   
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/jquery.mobile-1.0.1.min.css"/>
    <script type="text/javascript" src="/js/jquery-1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery-mobile-1.0.1/jquery.mobile-1.0.1.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";
        console.log("Demo Storage Key")
        $('#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>

akan...@gmail.com

unread,
Feb 28, 2012, 10:23:00 PM2/28/12
to phon...@googlegroups.com
Hi Rajesh,

You can find the full example of local storage script in Phonegap API Documentation.

No need to use modernizr. Just a simple query to save and retrieve the data.

Cmiiw,
Aziz

Sent from my BlackBerry®
powered by Sinyal Kuat INDOSAT
From: Rajesh Jain <rja...@gmail.com>
Date: Tue, 28 Feb 2012 19:15:08 -0800 (PST)
Subject: [PhoneGap] How to use Modernizr.localstorage?
--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com

Rajesh Jain

unread,
Feb 28, 2012, 11:32:40 PM2/28/12
to phon...@googlegroups.com, akan...@gmail.com
Hi Aziz

Thank you for your reply. I tried the example at

http://docs.phonegap.com/en/1.4.1/phonegap_storage_storage.md.html#localStorage

But it doesn't seem to work either. I have tried the app on my emulator as well as the Android Phone.

A dumb question:

If I add a message

alert("Something"); should it pop up a alert....

I don't see an console messages or alerts....

Thanks
Rajesh

akan...@gmail.com

unread,
Feb 28, 2012, 11:41:34 PM2/28/12
to Rajesh Jain, phon...@googlegroups.com
Have you show the LogCat window to show the console output?

If you use eclipse, you can enable the LogCat window in menu Window > Show View > LogCat

Regards

Sent from my BlackBerry®
powered by Sinyal Kuat INDOSAT
From: Rajesh Jain <rja...@gmail.com>
Date: Tue, 28 Feb 2012 20:32:40 -0800 (PST)
Subject: Re: [PhoneGap] How to use Modernizr.localstorage?

Rajesh Jain

unread,
Feb 28, 2012, 11:43:00 PM2/28/12
to akan...@gmail.com, phon...@googlegroups.com
Yes, I have the logcat and I am using Eclipse. So should I be getting console.log messages and alert messages....

 

thanks

Rajesh Jain

unread,
Feb 29, 2012, 12:13:20 AM2/29/12
to akan...@gmail.com, phon...@googlegroups.com
It seems to work now, I had to clean up redundant javascript loads and also arrange the sequence of javascript loads.

Thanks
Rajesh

akan...@gmail.com

unread,
Feb 29, 2012, 12:14:22 AM2/29/12
to Rajesh Jain, phon...@googlegroups.com
Great!

Regards,

Aziz
Sent from my BlackBerry®
powered by Sinyal Kuat INDOSAT
From: Rajesh Jain <rja...@gmail.com>
Date: Wed, 29 Feb 2012 00:13:20 -0500
Reply all
Reply to author
Forward
0 new messages