實時更新html列表

Question

我正在使用jstorage來存儲本地數據，並且顯示在html頁面中是否存在一個JavaScript庫，只要本地存儲數據發生更改，它應該會自動更新視圖？ 我綁角，但找不到我可以遵循的任何示例。

Answer 1

如果您正在使用angular，您可以$watch更改localStorage並根據您的模型更新。

事情是這樣的：

angular.module('app', []).controller('ctrl', function($window, $scope, $window) { 
    $scope.$watch(function() { 
    return $window.localStorage.data; 
    }, function(n) { 
    console.log('local storage changed'); 
    $scope.dataFromLS = n; 
    }); 

    $scope.storeOnLS = function() { 
    $window.localStorage.data = $scope.valueToStoreOnLS; 
    }; 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 

<div ng-app="app" ng-controller="ctrl"> 
    {{dataFromLS}}<br /> 
    <input ng-model="valueToStoreOnLS" /><button ng-click="storeOnLS()">Save on LS</button> 
</div> 

Working demo