0

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?

user1969585
  • 1

1 Answers1

0

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>
user1969585
  • 1