背景
在 Web 应用程序开发中，数据存储是不可避免的。而使用本地存储(LocalStorage)是一种常见的方式。LocalStorage 是 HTML5 标准中提供的 API，它可以让我们在浏览器端存储简单的键值对数据，并且这些数据可以跨页面和会话(session)共享。
AngularJS 是一个流行的前端框架，它提供了强大的数据绑定和模板功能。在应用程序中使用 AngularJS 和 LocalStorage 可以使得数据的管理变得更加方便。
然而，在使用 LocalStorage 存储数据时，我们需要考虑数据的变化如何通知到应用程序。因为 LocalStorage 中的数据可以被其他页面或者脚本修改，而这些修改对当前页面并没有任何通知。如果我们希望在数据变化时及时更新界面或者执行其他操作，就需要监听 LocalStorage 的变化事件。
监听 LocalStorage 变化事件
LocalStorage 提供了一个 storage 事件，当 LocalStorage 中的数据发生变化时会触发该事件。但是，由于浏览器的限制，只有在其他页面修改 LocalStorage 中的数据时才能触发该事件，而在当前页面修改则不会触发。
要解决这个问题，可以采用以下两种方法：
方法一：使用 $watch
在 AngularJS 中，可以使用 $watch 来监听 LocalStorage 中数据的变化。具体来说，我们可以在 controller 中使用以下代码：
$scope.$watch(function () { return localStorage.getItem('key'); }, function (newValue, oldValue) { if (newValue !== oldValue) { // 执行其他操作 } });
上述代码中，$watch 函数的第一个参数是一个函数，用于获取 LocalStorage 中指定键的值。当该值发生变化时，$watch 函数的第二个参数会被调用，可以在这里执行其他操作。
方法二：使用 window.postMessage
另一种方法是使用 window.postMessage API。这个 API 可以在不同的窗口之间发送消息，因此我们可以在修改 LocalStorage 的同时向当前窗口发送消息，从而触发事件处理程序。具体来说，我们可以在修改 LocalStorage 的脚本中加入以下代码：
window.postMessage('localStorageChanged', '*');
然后，在 AngularJS 应用程序中添加以下代码：
angular.element($window).on('message', function (event) { if (event.originalEvent.data === 'localStorageChanged') { // 执行其他操作 } });
上述代码中，我们通过 angular.element 函数获取了 $window 对象，并使用 on 函数注册了 message 事件处理程序。当收到消息时，我们判断消息内容是否为 'localStorageChanged'，如果是，则执行其他操作。
示例代码
以下代码演示了如何在 AngularJS 应用程序中监听 LocalStorage 的变化事件，并在变化时执行其他操作。
-- -------------------- ---- ------- ----------------------- --- --------------------------- -------- -------- - -- -- ------------ ---- ---------------------- -- - ------ ------------------------------ -- -------- ---------- --------- - -- --------- --- --------- - -- ------ ------------------------- -------- - - ---------- - --- -- -- ------------ -- ----------------------------- ----------- ---展开代码
上述代码中，我们定义了一个名为 myApp 的 AngularJS 应用程序，并在其内部定义了一个名为 myController 的 controller。在 myController 中，我们使用 $watch 函数监听 myKey 键对应的值的变化，并在变化时输出日志信息。最后，我们使用 localStorage.setItem 函数来修改 LocalStorage 中 myKey 键对应的值。
结论
在
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31676
