javascript - 实时更新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>

工作演示