jquery-mobile - 使用phonegap和jquery（-mobile）在多页移动应用程序中的页面显示上未更新LocalStorage值

Question

我有一个使用 phonegap、leaflet 和 jquery(-mobile) 的多页移动应用程序以及以下问题：

在 page1 上，当单击地图标记时，将 poi 的名称写入 localstorage，然后调用 page2：

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';
};

在第 2 页上，我正在执行以下操作：

<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>

正确值仅在第一次调用时显示。当再次单击 page1 的地图标记时，旧值而不是本地存储的值会显示在 page2 上，直到进行页面刷新。我该怎么做才能显示正确的值？

Answer 1

我通过使用会话存储解决了这个问题：

第 1 页上的设置：

var onMarkerClick = function(e) {
  akt_poi = e.layer.options.poi;
  sessionStorage.akt_poi=akt_poi;
  window.location = '#page2';
};

在第2页上阅读：

<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>