Using AngularJS with $window.sessionStorage (using Onsen UI)

Question

I am trying to implement a simple login feature. I want to have the DOM load a different element based on whether the $window.sessionStorage.currentUserId5 session exists or not. But the conditional statement I have added to .run() just keeps using the else{} statement

<script>
   var app =  ons.bootstrap('app',  ['onsen','angular-svg-round-progress','nvd3','ngStorage']).run(function($rootScope,$window){ 

        if($window.sessionStorage.currentUserId5)
        {
           $("#menudiv").html('<ons-sliding-menu var="menu" id="menusliding" main-page="main.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left"  ></ons-sliding-menu>');
        }
        else{

           $("#menudiv").html('<ons-sliding-menu var="menu" id="menusliding" main-page="login.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left"  ></ons-sliding-menu>');               
        }           

       });
</script>  


<div id="menudiv"></div>

Controller

User clicks button and this is called, $window.sessionStorage should be created here

    $http.post('http://xxx-xxx.us-east-1.elasticbeanstalk.com/apipost/checkuserlogin', parameter, config).success(function (data, status, headers, config) {

            // if login, user session created, redirected to index.html
            if(data['result'] == 'success'){

                $window.sessionStorage.currentUserId5 = '5'
                $window.location.reload();

            }
            else {
                // else error pop up 
                ons.notification.alert({
                  message: 'Please try again'
                });   
            }
        })
        .error(function (data, status, header, config) {

    });

score 0 · Answer 1 · answered Apr 14 '16 at 06:15

I don't want to be rude, but I think the question is not really related to Onsen UI. Even though you're using it, I doubt that the usage of Onsen UI changes your actual question. (Unless Onsen UI breaks the code in some way.)

What you seem to be using is the ngStorage module. From what I've seen it seems like the normal way to access local and sessionStorage is just by having them directly, rather than through $window.

So you can try to just require $sessionStorage and use it directly. If you think that the issue may be connected to some browser reloading somehow breaking the session etc you could try $localStorage and see if it works. The final thing you could try is just see if the normal localStorage and sessionStorage work for you.

And if you want to debug what happens then you can do something like

$http.post('...', parameter, config).success(function (data, status, headers, config) {
    alert(data.result);

    if(data['result'] == 'success'){
        $window.sessionStorage.currentUserId5 = '5'
        alert($window.sessionStorage.currentUserId5);
        $window.location.reload();
    }
    else {
        ...
    }
}

Usually it's better to use console.log instead of alert, but in this case alert can be better since it will stop the execution until you click ok.

The other option is to click the preserve log option in the browser inspector's console. To open the chrome console you can do Ctrl + Shift + J or Cmd + Opt + J. The other browsers also have similar consoles where you can see the logs from console.log. Usually these types of issues can be debugged without the need of external help.

Using AngularJS with $window.sessionStorage (using Onsen UI)

1 Answers1