javascript - 如何在angularjs中访问$localStorage中保存的数据

Question

我正在开发 MEAN 应用程序，用户登录成功后，我想将返回的用户数据保存在浏览器的 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('/');
        }

不，当我在另一个 Controller 中访问 $rootScope 时，我可以获得存储在 $localStorage 中的值。即使在我的 Chrome 浏览器中，我也可以通过检查看到数据存储在 $localStorage 中。 但是当我刷新页面时，我可以看到浏览器中的 localStorage 中仍然有数据，但在我的 $rootscope 中却没有。我的 rootScope 在页面刷新后获取空数据，我非常感谢有关如何访问这些数据并将其存储在 rootScope 中的任何建议。

Answer 1

正如我所说，当您像任何 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);
                                    }

以下示例:如果没有 userData，则在模块运行函数中通过 $localStorage 访问数据，则重定向到主状态。

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