如何查看本地存儲更改

Question

在將此問題標記爲重複之前，請注意我不使用角度爲$localstorage的服務。

我該如何看待本地存儲更改？

什麼，我現在是這樣的：

var isUnlocked = window.localStorage.getItem('isUnlocked'); 
     if(isUnlocked === "true") { 
     $scope.$apply(function() { 
     $scope.unlocked = true; 
     }); 
     } 

現在的問題是，改變第一個可見在刷新後是邏輯。我該如何改變這一點？

Answer 1

使用$scope.$watch的函數返回您希望觀察的localStorage值。

function getValue(){ 
    return window.localStorage.getItem('isUnlocked'); 
} 

$scope.$watch(getValue, function(newValue){ 
    if (newValue === "true"){ 
     $scope.$apply(function(){ $scope.unlocked = true; }); 
    } 
}); 

Answer 2

您可以編寫一個包裝類，它在$ rootScope上發送一個事件，然後監聽需要更新的事件。

'use strict'; 

(function(angular) { 
    angular 
    .module('myModule') 
    .service('StorageService', ['$rootScope', function($rootScope) { 
     this.getItem = function(key) { 
     return localStorage.getItem(key) || undefined; 
     }; 
     this.setItem = function(key, value) { 
     localStorage.setItem(key, value); 
     $rootScope.$emit('STORAGE_SERVICE_' + key.toUpperCase() + '_UPDATED'); 
     } 
    }]); 
})(window.angular); 

(function(angular) { 
    angular 
    .module('myModule') 
    .controller('myController', ['$scope', 'StorageService', function($scope, StorageService) { 
     $scope.$on('STORAGE_SERVICE_ISUNLOCKED_UPDATED', function() { 
     var isUnlocked = StorageService.getItem('isUnlocked'); 
     if(isUnlocked === "true") { 
      $scope.$apply(function() { 
      $scope.unlocked = true; 
      }); 
     } 
     }); 
    }]); 
})(window.angular);