//index.html

 <div data-role="page" id="main">
        <div data-role="header" data-position="fixed">
            <h1>page1 </h1>
        </div>
        <div class="ui-content">
			<label>Key: <input type="text" id="tempKey"></label>
			<label>Value: <input type="text" id="tempValue"></label>
			<button type="button" id="saveAction">Save</button>
		</div>
    </div>
      <div data-role="page" id="secondPage">
        <div data-role="header" data-position="fixed">
            <h1>page2 </h1>
        </div> 
       <div class="ui-content content-padding">
	        <ul class="ui-listview">
	        	<li><button type="button" id="loadAction">Load storage</button>
	        	<li><button type="button" id="clearAction">Clear storage</button>
       				<li><label>Your Key:</label><p id=mykey></p></li>
       				<li><label>Your Value:<label><p id=myvalue></p></li>
       		</ul>
		</div>
    </div>
    
    
//main.js

function saveHandler() {
	var tempKey = document.getElementById("tempKey").value,
	tempValue = document.getElementById("tempValue").value;

    localStorage.setItem(tempKey,tempValue);
	tau.changePage("#secondPage");	
}


function loadHandler() {
	var myKey, myValue;
	
	myKey = localStorage.key(0);
	myValue =  localStorage.getItem(localStorage.key(0));
	console.log("Key:" + myKey + "Value:" + myValue);
	
	document.getElementById("mykey").innerHTML = myKey;
	document.getElementById("myvalue").innerHTML = myValue;
}

function clearHandler() {	
	 localStorage.clear(); 	
	 console.log("storage is cleaned");
}

var initHandler = function() {
	var saveAction = document.getElementById("saveAction"),
		loadAction = document.getElementById("loadAction"),
		clearAction = document.getElementById("clearAction");
	
	saveAction.addEventListener('click', saveHandler, false);
	loadAction.addEventListener('click', loadHandler, false);
	clearAction.addEventListener('click', clearHandler, false);
};

window.onload = initHandler;