LocalStorage Values not updated on Page Show in multipage mobile app using phonegap and jquery(-mobile) - jquery-mobile

Question

I have a multipage mobile app using phonegap, leaflet and jquery(-mobile) and the following problem:
On page1, when clicking on a map-marker, the name of the poi is written to localstorage and then page2 is called:
var onMarkerClick = function(e) {
akt_poi = e.layer.options.poi;
var globVars = {
"akt_poi": akt_poi,
};
localStorage.setItem('globalVariables', JSON.stringify(globVars));
window.location = '#page2';
};
On page2 i'm doing the following:
<div data-role="content">
<div id=poi></div>
<script type="text/javascript">
var gV = JSON.parse(localStorage.getItem("globalVariables"));
var a_poi = gV.akt_poi;
document.getElementById("poi").innerHTML='<h2>'+a_poi+'</h2>';
</script>
The correct value is shown only at the first call. When doing another click on a map-marker of page1 the old value instead of the locally stored one is shown on page2 until doing a page-refresh.
What can i do display the right value?

Answer 1

I solved the problem by using sessionstorage:
setting on page1:
var onMarkerClick = function(e) {
akt_poi = e.layer.options.poi;
sessionStorage.akt_poi=akt_poi;
window.location = '#page2';
};
reading on page2:
<div data-role="content">
<div id=poi></div>
<script type="text/javascript">
$('#page_audio').live('pageshow', function(event, ui) {
document.getElementById("poi").innerHTML='<h2>'+sessionStorage.akt_poi+'</h2>';
});
</script>