将 AngularJS 与 $window.sessionStorage 一起使用（使用 Onsen UI）答案

【问题标题】：Using AngularJS with $window.sessionStorage (using Onsen UI)将 AngularJS 与 $window.sessionStorage 一起使用（使用 Onsen UI）
【发布时间】：2016-04-13 10:58:47
【问题描述】：

我正在尝试实现一个简单的登录功能。我想让 DOM 根据 $window.sessionStorage.currentUserId5 会话是否存在来加载不同的元素。但是我添加到 .run() 的条件语句只是继续使用 else{} 语句

<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>

控制器

用户点击按钮，这被称为，$window.sessionStorage 应该在这里创建

    $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) {

    });

【问题讨论】：

标签： angularjs onsen-ui onsen-ui2

【解决方案1】：

我不想粗鲁，但我认为这个问题与 Onsen UI 并没有真正的关系。即使您正在使用它，我也怀疑 Onsen UI 的使用会改变您的实际问题。（除非 Onsen UI 以某种方式破坏了代码。）

您似乎使用的是ngStorage 模块。从我所见，访问 local 和 sessionStorage 的正常方式似乎是直接使用它们，而不是通过 $window。

所以你可以尝试只需要$sessionStorage 并直接使用它。如果您认为问题可能与某些浏览器重新加载以某种方式中断会话等有关，您可以尝试$localStorage 并查看它是否有效。您可以尝试的最后一件事就是看看普通的localStorage 和sessionStorage 是否适合您。

如果你想调试发生了什么，那么你可以做类似的事情

$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 {
        ...
    }
}

通常最好使用console.log 而不是alert，但在这种情况下alert 会更好，因为它会停止执行，直到您单击确定。

另一个选项是单击浏览器检查器控制台中的preserve log 选项。要打开 chrome 控制台，您可以执行 Ctrl + Shift + J 或 Cmd + Opt + J。其他浏览器也有类似的控制台，您可以在其中查看来自console.log 的日志。通常这些类型的问题可以在不需要外部帮助的情况下进行调试。

【讨论】：