Question

我需要使用这个

jQuery( ".selector" ).on( "pagebeforechange", function( event ) { ... } )

检查我的本地存储密钥/值以决定加载哪个屏幕。我已阅读此文档，但我是Javascript的新手，并且不了解如何正确执行此操作。

文档未显示任何示例代码。

我也尝试过在Stackoverflow上找到的一些方法，但它们根本不起作用。

请显示一些示例代码。谢谢。

Lesz

代码更新：

//Check localStorage
$(document).bind('pagebeforechange', function (event, ui) {
        if(localStorage.logon == "yes")
            $.mobile.changePage("#userMainPage");
        else
            $.mobile.changePage("#welcome");
});

代码使用this post作为@Omar 建议的参考

//Check localStorage
$(document).on("pagebeforechange", function(e, data) {
        if (localStorage.logon == "yes") {
            $.mobile.changePage("#userMainPage", {
                transition: "flow"
            });
            e.preventDefault();
        }
    });

这两个代码都没有把我带到页面上。

Answer 1

你可以像这样使用它：

$(document).bind('pagebeforechange', function (event, ui) {
    if(localStorage.keyName == "XXX")
            $.mobile.changePage("#pageXXX");
        else
            $.mobile.changePage("#pageYYY");
});

打开1页ID idValue是你想要的。否则打开另一页。

Answer 2

我找到了解决方法来实现我的需求。我更正了我的代码，引用了这里回答的建议，当我用console.log测试时，事件正常。

但我无法使用该方法，因为事件会在每次页面加载时触发。我只需要第一个屏幕来检查本地存储。所以我现在的解决方法如下。

我正在单个HTML文件中创建多页应用，因此我创建了一个新的“检查器”页面作为第一页。

我的检查页面：

<!--    page 0 [checker] on top of among all page-->
<div data-role="page" id="checker">
</div>

然后在JS上我有这个：

//Check localStorage and redirect user to matching screen
$('#checker').on("pagebeforeshow", function() {
    if (localStorage.token == null) {
        $.mobile.changePage("#welcome");
    }
    else {
        var active_page = localStorage.active_page;
        $.mobile.changePage(active_page);
    }
});

为什么我创建“检查器”页面是因为我不希望在重定向之前显示初始“欢迎”页面。现在我使用“检查器”来覆盖闪光灯，因为“检查器”是空的。

我希望有一种更好的方式可以建议用更清洁，更智能和更少的代码来做我需要的东西。

我真的希望有人可以建议一个更好的事件处理程序，我可以消除“检查器”页面加载闪烁。谢谢大家。

检查localstorage以决定加载哪个屏幕[jquery / javascript]

2 个答案: