Jquery Mobile AJAX 发布数据未保存到 localStorage答案

【问题标题】：Jquery Mobile AJAX post data not saving to localStorageJquery Mobile AJAX 发布数据未保存到 localStorage
【发布时间】：2013-01-11 00:24:04
【问题描述】：

我有一个 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'）时，如果我让警报保持几秒钟，数据确实会显示在 web 应用程序的原始负载的 localStorage 中。

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

任何帮助将不胜感激

【问题讨论】：

尝试在 .post 调用中移动警报（'hi'）。

标签： javascript jquery jquery-mobile local-storage

【解决方案1】：

修好了！！！

所以问题与我发布的代码无关。它与我在 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 的位置（所有自定义脚本都是为项目编写的）。

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

【讨论】：