AngularJS sessionStorage和scope

Question

有人知道为什么我的作用域变量没有被更新吗？这让我感到困惑。sessionStorage变量很好，但是当我将它们定义在作用域变量中时，我会得到“未定义”错误。我已经尝试使用$scope.$apply，但显然作用域已经被消化了...：S请帮助新手。

  if(sessionStorage.loggedIn){

    $scope.user = sessionStorage.user;  
    $scope.user.gravatar = sessionStorage.gravatar;
    console.log($scope.user.gravatar);
    console.log('Session variable is active');
    $scope.loggedIn = sessionStorage.loggedIn;

  }

完整代码：

app.controller('loginCtrl', ['$scope','$route','Auth','$modal','$timeout', function($scope,$route,Auth,$modal,$timeout){

  if(sessionStorage.loggedIn){

    $scope.user = sessionStorage.user;  
    $scope.user.gravatar = sessionStorage.gravatar;
    console.log($scope.user.gravatar);
    console.log('Session variable is active');
    $scope.loggedIn = sessionStorage.loggedIn;

  }

  $scope.login = function(){
    Auth.save({
      'username': $scope.username,
      'password': $scope.password
    },function(data) {
      $scope.loggedIn = true;
      $scope.user = data.user;
      $scope.user.gravatar = data.gravatar;

      sessionStorage.loggedIn = $scope.loggedIn;
      sessionStorage.user = data.user; 
      sessionStorage.gravatar = data.gravatar;
      $route.reload();

    },function(response){
      $scope.flash = response.data.flash;   
      $scope.pop = true;    
      $timeout(function(){$scope.pop = false;}, 3000);
    })

  };

  $scope.logout = function (){
    Auth.get({},function(){  
      delete sessionStorage.user;
      delete sessionStorage.gravatar;
      delete sessionStorage.loggedIn;
      $scope.loggedIn = false;
      $timeout(function(){$route.reload();}, 1000);
    })
  };


}]);

事件链总结：

1）用户登录

2）成功登录后，用户详细信息（json对象）存储在sessionStorage.user = data.user中，data.user变量通常包含此类信息：{id: 1, username: "user123", firstname: "", lastname: "", email: "[e-mail]"} -- 用户的Gravatar哈希值也存储在一个sessionStorage.user.gravatar变量中。

3）如果用户退出登录，则删除sessionStorage变量。

4）但是，如果用户仍然登录，并刷新/重新加载页面（从浏览器），则sessionStorage变量仍处于活动状态，并且仍然包含数据，但是由于某种原因，当我设置作用域变量例如$scope.user = sessionStorage.user - 尽管sessionStorage.user完全可行 - 作用域变量仍然未定义。问题似乎与作用域有关。

- Tourshi

---

你确定 sessionStorage.user 是一个对象吗？ - JimmyRare

你能指定你正在调用的事件链以及你期望的行为应该是什么吗？ - adrichman

你能把这个放到 jsfiddle、jsbin 或者 plunker 上吗？同时，你使用的浏览器也很重要。 - Maslow

相关：https://dev59.com/v2kw5IYBdhLWcg3wp8Oc - Maslow

@Maslow 很抱歉，将其放入jsFiddle中可能有些棘手。我会像adrichman建议的那样指定事件链。 - Tourshi

Answer 1

在将用户对象存储在sessionStorage之前，您需要将其序列化为JSON，因为它是作为字符串值集合实现的。

尝试类似于以下的内容

 sessionStorage.user = JSON.stringify($scope.user);

然后

 $scope.user = JSON.parse(sessionStorage.user);

- spacemigas

---

附注：还有一个函数angular.fromJson( json );。 - kaiser

Answer 2

现如今，AngularJS中没有JSON.stringify函数，只需将$scope的值分配给sessionStorage即可。

$sessionStorage.user = $scope.user;

点击此处获取$sessionStorage服务的详细文档

AngularJS - $sessionStorage由Scriptwerx提供，是用于在您的AngularJS应用程序中使用的一种服务。

npm install --save-dev angular-swx-session-storage

- Pulithevan S