HTML5 localStorage populate form onload

Question

I am following the example in the O'Reilly "Building iPhone Apps with HTML, CSS and Javascript," I want the values entered from a form to populate after the app closes and reloads, similar to a php 'sticky form.'

The only aspects I changed from the example is that saveSettings is called on submit, and here I have it called on unload (previously on input blur).

Load settings is called on document ready rather than submit.

pageInit is not working though I have jquery mobile installed.

     <!DOCTYPE html> 
        <html> 
        <head> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

        <script>
 $(document).ready(function(){
$(window).unload(saveSettings);
loadSettings();
});

function loadSettings() {
$('#monthly-income').val(localStorage.income);
$('#saving-per-month').val(localStorage.saving);
$('#current-age').val(localStorage.age);
}

function saveSettings() {
localStorage.age = $('#current-age').val();
localStorage.saving = $('#saving-per-month').val();
localStorage.income = $('#monthly-income').val();
}  
        </script>


        </head> 
        <body> 
        <div data-role="content">   
            <div data-type="horizontal"  data-role="controlgroup">
                <a href="#foo"   data-role="button">Input</a>
                <a href="#foo1"  id="output-button" data-role="button">Output</a>
            </div>
            <input type="number" min="500" max="10000" step="100" name="monthly-income" id="monthly-income" value=""/>
            <input type="number"  min="500" max="10000" step="100" name="saving-per-month" id="saving-per-month" value=""/>
            <input type="number" min="16" max="75" step="1" name="current-age" id="current-age" value=""/>
        </body>
        </html>

Answer 1

1) You could place your page in internet, at best providing QR code to fast load on mobile (free QR generator here ), so everyone could easily test

2) Did the browser settings require to grant the domain the rights to store values in local storage? If so, onunload there's no place to accept such request. Place in your ready function one storage instruction to test

3) unload is a bit unreliable (example - browser crash). Have you considered saving values on onblur on inputs? When in large textareas, saving the value in timer, even if user is still editing, is practicised.

4) This question considers also problems with unload function. Maybe future answer to this question will solve your problem?

HTML5 localStorage populate form onload

Question

1 answers

solution1
0 ACCPTED 2011-11-17 09:58:53

HTML5 localStorage populate form onload

Question

1 answers

solution1 0 ACCPTED 2011-11-17 09:58:53

solution1
0 ACCPTED 2011-11-17 09:58:53