从AngularJS服务到控制器的JavaScript本地存储值

Question

我在AngularJS服务中设置本地存储值，并尝试在AngularJS控制器中获取值。但在控制器中，获取空值而不是我在服务中设置的值。

这里是我已经设置了本地存储值的服务：

app.factory('accountService', ['$http', '$q', 'serviceBasePath', 'userService', '$window', function ($http, $q, serviceBasePath, userService, $window) { 
    var fac = {}; 
    fac.login = function (user) { 
     var obj = { 'username': user.username, 'password': user.password, 'grant_type': 'password' }; 
     Object.toparams = function ObjectsToParams(obj) { 
      var p = []; 
      for (var key in obj) { 
       p.push(key + '=' + encodeURIComponent(obj[key])); 
      } 
      return p.join('&'); 
     } 

     var defer = $q.defer(); 
     $http({ 
      method: 'post', 
      url: serviceBasePath + "/token", 
      data: Object.toparams(obj), 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }).then(function (response) { 
      userService.SetCurrentUser(response.data); 

      // The local storage value I have set 

      localStorage.setItem('IsAuthenticated', true); 
      localStorage.setItem('userName', response.username); 

      defer.resolve(response.data); 
     }, function (error) { 
      defer.reject(error.data); 
     }) 
     return defer.promise; 
    } 
    fac.logout = function() { 
     userService.CurrentUser = null; 
     userService.SetCurrentUser(userService.CurrentUser); 

    } 
    return fac; 
}]) 

这里就是我想获得先前设定的本地存储值时，控制器：

app.controller('indexController', ['$scope', 'accountService', '$location', '$window', function ($scope, accountService, $location, $window) { 

    $scope.message = localStorage.getItem("IsAuthenticated"); 
    console.log($scope.message); 

    $scope.logout = function() { 
     accountService.logout(); 
     $location.path('/login'); 
    } 

}]) 

问题是我得到的是空值而不是我在服务中设置的值。

任何帮助请！

Answer 1

首先尝试在工厂本身得到这个..设置后...如果你能够到达那里，那么你一定会得到控制器。由于本地存储与工厂或控制器无关。

Answer 2

请尝试使用此功能，使用$ window。对付采用了棱角分明的浏览器存储

$window.localStorage.setItem('userName', response.username); 

Answer 3

最好的办法是：

1）创建一个与本地存储，sessionStorage的，饼干与通过服务公开通用的方法，涉及的服务。

2）该服务将被控制器特定的服务使用，该服务还处理将用于存储的密钥。

3）该服务将公开控制器使用的更具体的方法。

例如：

UserController中：

userService.setUserSession(session) 

UserService：

var SESSION_KEY = 'userSession'; 
setUserSession() { 
    storageService.sessionStorageProvider.set(SESSION_KEY, session) 
} 

StorageService：

// here you need to create generic method using inheritance which will expose sessionStorage and loacalStorage and cookieStorage. 

Answer 4

我相信你需要注入的依赖到你的工厂：

app.factory('accountService', ['$http', '$q', 'serviceBasePath', 'userService', '$window', '$localStorage', function ($http, $q, serviceBasePath, userService, $window, $localStorage) { 
    var fac = {}; 
    fac.login = function (user) { 
     var obj = { 'username': user.username, 'password': user.password, 'grant_type': 'password' }; 
     Object.toparams = function ObjectsToParams(obj) { 
      var p = []; 
      for (var key in obj) { 
       p.push(key + '=' + encodeURIComponent(obj[key])); 
      } 
      return p.join('&'); 
     } 

     var defer = $q.defer(); 
     $http({ 
      method: 'post', 
      url: serviceBasePath + "/token", 
      data: Object.toparams(obj), 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }).then(function (response) { 
      userService.SetCurrentUser(response.data); 

      // The local storage value I have set 

      $localStorage.IsAuthenticated = true; 
      $localStorage.userName = response.username; 

      //localStorage.setItem('IsAuthenticated', true); 
      //localStorage.setItem('userName', response.username); 

      defer.resolve(response.data); 
     }, function (error) { 
      defer.reject(error.data); 
     }) 
     return defer.promise; 
    } 
    fac.logout = function() { 
     userService.CurrentUser = null; 
     userService.SetCurrentUser(userService.CurrentUser); 

    } 
    return fac; 
}])