Check localstorage to decide which screen to load [jquery/javascript]

Question

I need to use this

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

to check my local storage key / value to decide which screen to load. I have read this document but I'm new to Javascript and do not understand how to execute this correctly.

The documentation does not show any example code.

I have also tried a few methods found on Stackoverflow but they didn't work at all.

Please show some example code. Thank you.

Lesz

Code update:

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

Code using this post as reference as suggested by @Omar

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

Both code doesn't not bring me to the page as it should.

use localStorage.index ="value" or localStorage.setItem['index'] = "value" to set your value and to get use var value = localStorage.getItem("index"); alert(value); — kamesh, Feb 27 '14 at 10:03
Hi @Omar, as I said I did tried other solution that I found here and I have update a new code which use the post that you recommended. I don't know what is wrong, again I'm just started learning Javascript/jQuery. Please advice, thanks. — MarkZ, Feb 27 '14 at 14:37
Because local storage is relatively slow, check this http://stackoverflow.com/questions/21139572/storing-a-variable-in-localstorage-is-too-slow/21174455#21174455 I've made a workaround for this issue. — Omar, Feb 27 '14 at 21:16

score 1 · Answer 1 · answered Feb 27 '14 at 10:04

1

You can use it like this:

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

Open 1 page id keyValue is something you want. Else open another page.

answered Feb 27 '14 at 10:04

MysticMagicϡ

28,593
16
73
124

I didnt got this, may be I need to read it more about pagebeforechange event and why this preventDeafault is used. Anyways thanks! – Rohit Tiwari Feb 27 '14 at 10:14
I used preventDefault to just get rid of multiple alerts. Welcome. :) @RohitTiwari – MysticMagicϡ Feb 27 '14 at 10:16
Hi @MysticMagic, I put the following code into custom.js but when I try launch the app, the page doesn't change. I have checked the localstorage key/value do exist. Please check my code update. – MarkZ Feb 27 '14 at 14:22
@user3053891 I would suggest to check localstorage and page navigation in button click event instead of pagebeforechage. – MysticMagicϡ Feb 28 '14 at 05:36

score 0 · Answer 2 · answered Feb 27 '14 at 18:07

I found a workaround to achieve what I need. I corrected my code with the reference of the suggestion answered here and the event is working fine when I test with console.log.

But I can't use that method because the event get triggered on every page load. I need only the first screen to check the localstorage. So my workaround now are as follow.

I'm creating multi-pages app in single HTML file, so I create a new "checker" page as the first page.

My checker page:

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

Then on JS I have this:

//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);
    }
});

Why I create a "checker" page is because I don't want the initial "welcome" page to be shown before redirect. Now I use "checker" to cover the flashes because "checker" is empty.

I do hope there is a better way someone can suggest that can do what I need with cleaner, smarter and lesser code.

I really hope someone can suggest a better event handler that I can eliminate the "checker" page load flashes. Thanks to all.

Check localstorage to decide which screen to load [jquery/javascript]

2 Answers2