如何使用AngularJS观察localstorage更改

Question

是否可以使用$ watch来监控对localStorage的更改？

我有一个工厂让设置/变得更简单

.factory('$localstorage', ['$window', function($window) {
    return {
        set: function(key, value) {
            $window.localStorage[key] = value;
        },

        get: function(key, defaultValue) {
            return $window.localStorage[key] || defaultValue;
        },

        setObject: function(key, value) {
            $window.localStorage[key] = JSON.stringify(value);
        },

        getObject: function(key) {
            return JSON.parse($window.localStorage[key] || '{}');
        }
    }
}]);

在我的控制器中我有

.controller('CodesCtrl', function($scope, $localstorage) {
    $scope.codes = $localstorage.getObject('codes');
    ...

在另一个控制器中,我正在添加到本地存储.我想在localStorage更改后立即呈现更改.

我已经看过一些SO帖子使用像ngStorage这样的东西,但理想情况下我想避免这样做.

可能吗？有人能指出我正确的方向吗？

Answer 1

您可以创建一个$ watch函数,返回您想要的任何内容.当它改变时,你的$ watch会运行.

$scope.$watch(function(){
  return $localstorage.getObject('codes');
}, function(newCodes, oldCodes){
  $scope.codes = newCodes;
});

确保对此进行性能测试.这个函数会被调用很多.

更好的方法是使用事件,只codes在必要时更新.

控制器A:

var codes = updateCodesAndStoreInLocalStorage(); // <That part's up to you
$rootScope.$emit('codesUpdated', codes);

控制器B:

$rootScope.$on('codesUpdated', function(event, codes){
  $scope.codes = codes; //Rely on localStorage for "storage" only, not for communication.
});