观察 $localStorage 的变化

Question

我正在使用可以在这里找到的 ngStorage 模块：https://github.com/gsklee/ngStorage

我在 localStorage 中设置了 lastSeenId 用于实时更新社交订阅源，因为这是一个混合应用程序 (Laravel/AngularJS)，我无法将其存储在 $scope 中。

我的StatusesController 在 X 秒内得到一个数组或数据（如果没有查看，则什么都没有），我得到数组的最后一项并像这样设置我的$localStorage var： $localStorage.lastStatusSeen = lastId;

我的导航控制器是我为用户设置一些新计数器以查看他们是否错过任何内容的地方，我得到的 lastSeenId 是这样的： $scope.$storage.lastStatusSeen 被发送到我的 API 以返回一些看不见的状态帖子。

这一切都有效，用户在状态页面上，如果有新数据，则将本地存储 var 设置为数据数组中的最后一个 ID。

问题是我的NavigationController 没有找到此更改，并且始终传递用户首次访问页面时传递的lastSeenId。

有没有办法在本地存储中观察该密钥的变化？

编辑：根据要求更新代码

    app.controllers.navigationController = ['$scope', 'pollingService', '$localStorage', function($scope, pollingService, $localStorage) {

    $scope.lastStatusSeen = $localStorage.lastStatusSeen;

    $scope.$watch(function () {
        return $localStorage.lastStatusSeen;
    }, function (newVal, oldVal) {
        if (!newVal) {
            return;
        }

        if (newVal !== oldVal) {
            // Assign to a local scoped var, or anything, here...
            $scope.lastStatusSeen = newVal;
            // I suggest call a method to do your logic outside this
            //$scope.onIdChange(newVal, oldVal); // If you need oldVal
        }
    });

    pollingService.startPolling('emailCount', 'api/email/new-count', 5000, function(response) {
        $scope.emailCount = response.data;
    });

    pollingService.startPolling('statusCount', 'api/social/new-count?lastid=' + $scope.lastStatusSeen, 5000, function(response) {
        $scope.socialCount = response.data;
    });

}];

Answer 1

您可以使用angular（$scope 或$rootScope）的任何作用域实体的$watch 方法观看它：

$scope.$watch(function () {
    return $localStorage.lastStatusSeen;
}, function (newVal, oldVal) {
    if (!newVal) {
       return;
    }

    if (newVal !== oldVal) {
        // Assign to a local scoped var, or anything, here...
        // I suggest call a method to do your logic outside this

        $scope.onIdChange(newVal, oldVal); // If you need oldVal
    }
});

注意性能，因为它几乎在每个$digest 循环中运行。另一个注意事项是您可以将此观察程序关联到一个变量，因此您可以随时取消它：

var watchIdStored = $scope.$watch(function () {
    /* ... */

当你想删除它时，将 var 作为函数调用：

watchIdStored(); // Removes the $watcher

编辑 1：

问题出在pollingService.startPolling('statusCount', 'api/social/new-count?lastid=' + $scope.lastStatusSeen。它构建了一个不再更改的字符串。您必须在此更改发生时通知此更改，向民意调查提供更新。

如果您在观察者中放置一个控制台来更新 var，您会看到它正在更新。

编辑 2：

因为你有一个stopPolling() 方法，你可以在你的控制器上创建一个构建/销毁函数。

function _setupPolling (name, url, pollingTime, callback) {
    pollingService.stopPolling(name);

    pollingService.startPolling.apply(pollingService, arguments);
}

现在，您可以在 $localStorage.lastStatusSeen 上发生的每一次更改上调用它：

$scope.$watch(function () {
    return $localStorage.lastStatusSeen;
}, function (newVal, oldVal) {
    if (!newVal) {
        return;
    }

    if (newVal !== oldVal) {
        console.log(newVal);

        // Assign to a local scoped var, or anything, here...
        $scope.lastStatusSeen = newVal;
        // I suggest call a method to do your logic outside this

        _setupPolling('statusCount', 'api/social/new-count?lastid=' + $scope.lastStatusSeen, 5000, function(response) {
            $scope.socialCount = response.data;
        });
    }
});