Utilizing the ngStorage module, which can be accessed at this link: https://github.com/gsklee/ngStorage
In order to maintain a lastSeenId for a real-time social feed in my hybrid app (Laravel/AngularJS), I am storing it in localStorage instead of $scope.
Within my StatusesController, upon receiving an array of data (or nothing if no updates), I extract the last item from the array and set my $localStorage variable like so:
$localStorage.lastStatusSeen = lastId;In my navigation controller, I set new counters for users to track any missed content. To retrieve the lastSeenId, I use:
$scope.$storage.lastStatusSeen, which is then sent to the API to fetch the number of unseen status posts.
This system functions smoothly as the user navigates through the status page, updating the local storage variable with the latest ID when new data is available.
The problem arises with my NavigationController not detecting these changes, consistently passing the initial lastSeenId from the user's first visit to the page.
Is there a method to monitor changes to that key in local storage?
EDIT: Revised code snippet as requested
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 locally scoped variable or any other action here...
$scope.lastStatusSeen = newVal;
// Consider invoking a method to handle logic outside of this function
//$scope.onIdChange(newVal, oldVal); // Include oldVal if needed
}
});
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;
});
}];