如何在 jAM 页面之间存储变量？答案

【问题标题】：How-to store variable beetween jQM pages?如何在 jAM 页面之间存储变量？
【发布时间】：2012-05-24 14:03:40
【问题描述】：

如何在两个 jQueryMobile 页面之间传递用户名之类的变量？

或者两个常规页面，将变量设置为全局变量不起作用，因为在下一次包含时，它会将变量设置回 null。

如何在两个 html 页面之间传递一个全局变量？

【问题讨论】：

我认为 jQuery Mobile 是关于单页应用程序的。
@Pointy JQM 拉入外部页面并将其附加到 DOM，但它可以用于多页面应用程序jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html

标签： javascript jquery jquery-mobile

【解决方案1】：

我通常使用本地存储，您也可以存储对象。例如：

var userInfo = {
            "username": "Bob",
            "roleName": "Admin",
            "image": "img/userPic.jpg",
        };

        //Store the object in local storage
        localStorage.setItem('loggedUser', JSON.stringify(userInfo));

然后在另一个页面上你可以简单地做：

var userInfo = JSON.parse(localStorage.getItem("loggedUser"));
var userName = userInfo.username;

【讨论】：

我正在考虑使用 localStorage，我想避免查找 localStorage，因为我将不得不多次使用相同的数据。我想知道 appcache 是否有存储变量的机制，因为应用程序需要离线工作...... localStorage 可能是更简单的解决方案。谢谢。

【解决方案2】：

您可以通过查询字符串或客户端路由使用 URL，可以使用 localStorage（假设它们在同一个域中），也可以使用 cookie。

如果您决定使用客户端路由，则有一个专门用于 JQM 的插件，它与不同的 JQM 页面事件相关联

https://github.com/azicchetti/jquerymobile-router

【讨论】：

感谢您提供看起来很有趣的链接。

【解决方案3】：

只要在两个页面之间的超链接上禁用ajax，就可以在查询字符串中传递它。

<a href="nextPage.php?username=joe" data-ajax="false">Next page</a>

您错过了 jQuery 移动转换的有益功能，但至少您可以成功地在页面之间传递变量。

更新：

来自the documentation：

页面间传递参数：

jQuery Mobile 不支持将查询参数传递给内部/嵌入式页面...

然后文档继续建议我没有尝试过的两个插件。 Page params plugin 和 jquery mobile routing plugin。

请务必查看上面链接的文档页面，以了解为什么传递参数不应该起作用的解释，但是如果您在没有散列的情况下加载页面（通过禁用 ajax 行为），那么您应该没问题 - 至少在我的经验。

【讨论】：

在同一个页面中，它们共享相同的上下文，因此不存在问题。只有当我需要访问用户 ID 才能对 websql 数据库执行查询时，问题才变得明显。我会尝试查看文档。谢谢。
@AdamSurfari;我不确定你是什么意思;我的回答（接近开头）是指将用户名传递到第二页。我可能是错的，但我将文档解释为您的所有网站页面都是“内部”的，而不同服务器上的所有内容都是“外部”的。因此，通过关闭默认行为 (data-ajax="false")，您将能够将参数传递到第二页。否则，第二个“内部”页面将使用特殊的 jquery 移动框架加载，其中查询参数可能会在所描述的方法中丢失。

【解决方案4】：

您可以像 JQM 存储自己的配置一样存储变量以供全局使用。只需在“mobileinit”的 $.mobile 下创建您自己的 javascript 对象，并将其用于您的全局变量：

    <!DOCTYPE html> 
    <html>
    <head>

        ...

        <script> // position before jquery.mobile.js is important for 'mobileinit' to fire
            $( document ).on( "mobileinit", function( event ) {

                //create global variable storage
                $.mobile.YourApplicationNameHere = {};

                //use it like this anywhere in your code:
                $.mobile.YourApplicationNameHere.globalVar1 = 1;
                $.mobile.YourApplicationNameHere.globalVar2 = 2;
                console.log("globalVar1 = " + $.mobile.YourApplicationNameHere.globalVar1);

            });
        </script>

        <script src="jquery/jquery.mobile-1.4.5.min.js"></script>

        ...

    </head>
        ...
    </html>

你可以在任何地方初始化你的全局变量，但是'mobileinit'是JQM最早的初始化点。

【讨论】：