This technique is similar to the PHP “sticky form” except more powerful and using only HTML5. This example uses jQTwith HTML5 local storage to create a calculator program. Later this can be easily wrapped in PhoneGap to create an app that can be submitted to the app store.

Most software applications need to store data in some sort of persistent fashion in order to be useful. When it comes to web apps, this task has traditionally been handled either with a server-side database or cookies set in the browser. With the advent of HTML5, web developers now have a few more options: localStorage, sessionStorage, and client-side databases. localStorage (collectively referred to as key/value storage) is very similar to cookies in that it allows you to use JavaScript to set name/value pairs that you can then retrieve across multiple page reloads.

Unlike cookies, however, localStorage data is not sent across the wire with the browser requests it lives entirely in the client. Therefore, it’s feasible to store much more data than you would want to with cookies.
// When the saveSettings() function is called, it grabs the values //from the form inputs using jQT’sval() function //and saves each in a localStorage variable of the same name.

function saveIncomeValues() {
localStorage.age = $('#current-age').val();
localStorage.saving = $('#saving-per-month').val();
localStorage.income = $('#monthly-income').val();
localStorage.growthSlider = $('#input-slider-growth').val();
}

function saveIncomeOutputValues() {
localStorage.growthSlider = $('#output-slider-growth').val();
}

/* we need to load the settings using the loadSettings() function. The loadSettings() function is the opposite of the saveSettings() function; i.e., it uses jQuery’s val() function to set the three fields of the Settings form to the corresponding values saved in localStorage.*/

function loadSettings() {
if(localStorage.income!='undefined' && localStorage.income!=''){
$('#monthly-income').val(localStorage.income);
}else{
$('#monthly-income').val('')
}

if(localStorage.saving!='undefined' && localStorage.saving!=''){
$('#saving-per-month').val(localStorage.saving);
}else{
$('#saving-per-month').val('')
}

if(localStorage.age!='undefined' && localStorage.age!=''){
$('#current-age').val(localStorage.age);
}else{
$('#current-age').val('')
}

if(localStorage.growthSlider!='undefined' && localStorage.growthSlider!=''){
$('#input-slider-growth').val(localStorage.growthSlider);
}else{
$('#input-slider-growth').val('')
}

$('#input-slider-growth').slider('refresh');
$('#input-slider-inflation').slider('refresh');

}

/* Save all values on window close */
$(window).unload(saveIncomeValues);

/*add percent symbol on activation of slider*/
$(document).ready(function(){
$('.ui-slider-handle,.ui-slider').mousedown(function(){
$('.percent').css('display', 'inline-block');
});

if($('#input-slider-growth').val()!='undefined' && $('#input-slider-growth').val()!=''){
$('.percent').css('display', 'inline-block');
}
});

/*Prevent container div from scrolling on touch devices, this locks the screen and prevents the ubiquitous "bounce" issue you see on iOS devices*/

document.ontouchmove = function(e) {
e.preventDefault();
};