0

我有一个 jquery 移动网络应用程序，其中包含使用单页架构的各种页面（每个 html 文件一页——我有多个 HTML 文件）。“page1”是最初加载的页面。我还有 4 个用于导航的其他选项卡 [page2、page3、page4 和 page5]，它们都是从 page1 的菜单中预取的。

在几乎每个页面上，我都使用 AJAX 发布调用与我的应用程序进行交互。为了效率/可用性，我将内容保存到 localStorage。

page1 上的代码如下所示：

$(document).on('pageshow','#page1', function(){ 

    var postTo = '../api/ajaxreturn.php';
    $.post(postTo, function (data){
        if (localStorage.getItem('ajaxreturn') == JSON.stringify(data)) return;
        else {
          localStorage.setItem('ajaxreturn',JSON.stringify(data));
          //alert(localStorage.getItem('ajaxreturn'))

        }
    }, "json");//end post
     //alert('hi')        

}); // end page1

其他页面的编码类似。

我遇到的问题是在原始 webapp 文档加载时，信息没有保存到 localStorage。当我签入调试器时，我看到预取页面的所有 localStorage 数据都已保存。为了获得 page1 的 localStorage，我必须单击任何 page2/3/4/5，然后返回 page1。这会再次调用“pageshow”函数并且它可以工作。

更奇怪的是，当我取消注释警报（'hi'）时，如果我将警报保持几秒钟，数据确实会显示在 webapp 原始负载的 localStorage 中。

也许它与时间问题有关？比赛条件？但我知道 ajax 调用正在工作，因为如果我取消注释“alert(localStorage.getItem('ajaxreturn'))”我会看到实际内容..所以不确定它是什么。

任何帮助将不胜感激

4

1 回答 1

0

修复！！！

所以这个问题与我发布的代码无关。它与我在 HTML 中的头文件的顺序有关。

提示：严格遵循 JQUERY 移动指南！！

我错过了您应该将 custom.js 文件放在 jquery.js 和 jquery.mobile.js 之间的提示！！！

我以前的代码看起来像这样：

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.swipeButton-1.2.1.js"></script>
<script src="js/ga.js"></script>
<script src="js/custom.js"></script>

当我将其更改为正确的方式时：

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.swipeButton-1.2.1.js"></script>
<script src="js/ga.js"></script>

注意 custom.js 的位置（所有自定义脚本都是为项目编写的）。

它解决了我的问题。所以一定要确保你的标题设置正确——这将为你节省数小时的头痛。希望这可以帮助你！

于 2013-01-11T15:48:02.267 回答