Javascript 如何使用AngularJS监视本地存储更改

是否可以使用$watch监视对本地存储的更改

我有一个工厂可以使设置/变得简单一点

.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');
    ...

在另一个控制器中，我将添加到本地存储。我希望在本地存储发生更改时立即呈现更改

我见过一些使用ngStorage之类的东西的SO帖子，但理想情况下我希望避免这样

---

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

你可以创建一个$watch函数，它可以返回你想要的任何东西。当它改变时，您的$watch将运行

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

请确保对其进行性能测试。这个函数将被多次调用

---

更好的方法是使用事件，并仅在必要时更新

code

控制器A：

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

---

使用自己的方法重载

localStorage.getItem

和

localStorage.setItem

。请注意，如果使用手表，当localStorage中的值更改时，不会立即调用手表处理程序。由于Angular只比较$digest中的旧值和新值（脏检查），因此仅当发生$digest时才会调用watch处理程序。大多数用户启动的操作都会启动$digest（即ng click），但如果您希望事情只是自动发生，则需要了解如何调用监视处理程序。Angular的$localstorage和$timeout包装器在使用时会触发$digest循环，所以这不应该是一个问题。你能详细说明你的第二条路吗。不能弄清楚，我也想像JamesSure一样实现。每当您将某些内容保存到localstorage时，它都会响应一个事件（例如，单击一个按钮，或在输入字段中输入一些文本）。当该事件发生时，您可以$emit（）一个事件。这就像向应用程序宣布发生了什么事情。在本例中，我们宣布保存了一些数据（使用任意名称：“codesUpdated”）。在应用程序的其他地方，在其他一些控制器中，$发出事件之前，我们使用$on（）表示：“当发生'codesUpdated'时，运行此代码作为响应”。该代码可能会更新UI，或者可能会将数据保存到服务器。

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