如何在angularjs

时间:2016-06-21 06:59:48

标签: javascript angularjs local-storage rootscope

我正在研究MEAN app,用户登录成功后我想在浏览器中的localStorage中保存返回的用户数据,以便我可以进一步使用它,我正在使用ngStorage模块。我可以在浏览器的本地存储中保存用户数据。这是我在LoginController中的代码:

 function loginController($http, $location, $rootScope,$localStorage){
    var vm = this;
    vm.signIn = signIn;

 function signIn() {      
    $http({
        url: '/login',
        method: 'post',
        data: vm.login
    }).then(function(respond) { 
     if(respond.data){ 
        $localStorage.userData = respond.data;   
         var info = $localStorage.userData;         
        $rootScope.userInfo = info; 
         $location.path('/dashboard/'+respond.data._id);
      }else{
         $location.path('/');
        }

当我在另一个控制器中访问$ rootScope时,我可以获得存储在$ localStorage中的值。甚至在我的chrome浏览器中,我可以从inspect中看到数据存储在$ localStorage中。 但是当我刷新页面时,我可以看到localStorage中的浏览器中仍有数据,但我的$ rootscope中没有。我的rootScope在页面刷新后获取空数据,我真的很感激有关如何访问这些数据并存储在rootScope中的任何建议。

2 个答案:

答案 0 :(得分:0)

在应用重新加载时从本地存储中检索用户数据

app.run(function($rootScope){
  if(localStorage['userData'])
  {
    $rootScope.userData = JSON.parse(localStorage.getItem('userData'));
  }
});

答案 1 :(得分:0)

我已经说过,当你像任何javascript变量一样重新加载位置时,$rootScope会被破坏。您可以在整个应用程序的任何位置访问localStorage数据,直到您将其存档,删除或重置为止。

    function loginController($http, $location, $rootScope, $localStorage) {
                var vm = this;
                vm.signIn = signIn;

                function signIn() {
                    $http({
                            url: '/login',
                            method: 'post',
                            data: vm.login
                        }).then(function(respond) {
                                if (respond.data) {
                                    $localStorage.userData = respond.data;
                                    var info = $localStorage.userData;
                                    $rootScope.userInfo = info;
                                    $location.path('/dashboard/' + respond.data._id);
                                } else {
                                    $location.path('/');
                                }

      function anyController($scope, $localStorage) {
                                       console.log($localStorage.userData);
                                    }

如果在模块运行功能中没有通过$localStorage访问数据的userData,则重定向到主状态的示例。

angular.module("yourAppName")
  .run(function ($rootScope, $state,$localStorage) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
      if(toState.name == 'app') return;
      if (!$localStorage.userData){
        $state.transitionTo("app");
        event.preventDefault(); 
        return;
      }
    });
  });