观察 $localStorage 的变化

Question

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

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

我的 StatusesController 每 X 秒获取一个数组或数据（如果要查看 none 则什么也没有），我获取数组的最后一项并设置我的 $localStorage var这个： $localStorage.lastStatusSeen = lastId;

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

一切正常，用户在状态页面上，如果有新数据，则将本地存储变量设置为数据数组中的最后一个 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() 方法，你可以在你的控制器上创建一个 build/destroy 函数。

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;
        });
    }
});

观察 $localStorage 的变化

Watch $localStorage for changes

javascript

local-storage

angularjs

angularjs-scope

ng-storage

编辑 1：

编辑 2：