背景
在 Web 应用程序开发中，数据存储是不可避免的。而使用本地存储(LocalStorage)是一种常见的方式。LocalStorage 是 HTML5 标准中提供的 API，它可以让我们在浏览器端存储简单的键值对数据，并且这些数据可以跨页面和会话(session)共享。
AngularJS 是一个流行的前端框架，它提供了强大的数据绑定和模板功能。在应用程序中使用 AngularJS 和 LocalStorage 可以使得数据的管理变得更加方便。
然而，在使用 LocalStorage 存储数据时，我们需要考虑数据的变化如何通知到应用程序。因为 LocalStorage 中的数据可以被其他页面或者脚本修改，而这些修改对当前页面并没有任何通知。如果我们希望在数据变化时及时更新界面或者执行其他操作，就需要监听 LocalStorage 的变化事件。
监听 LocalStorage 变化事件
LocalStorage 提供了一个 storage 事件，当 LocalStorage 中的数据发生变化时会触发该事件。但是，由于浏览器的限制，只有在其他页面修改 LocalStorage 中的数据时才能触发该事件，而在当前页面修改则不会触发。
要解决这个问题，可以采用以下两种方法：
方法一：使用 $watch
在 AngularJS 中，可以使用 $watch 来监听 LocalStorage 中数据的变化。具体来说，我们可以在 controller 中使用以下代码：
---------------------- -- -
------ ----------------------------
-- -------- ---------- --------- -
-- --------- --- --------- -
-- ------
-
---上述代码中，$watch 函数的第一个参数是一个函数，用于获取 LocalStorage 中指定键的值。当该值发生变化时，$watch 函数的第二个参数会被调用，可以在这里执行其他操作。
方法二：使用 window.postMessage
另一种方法是使用 window.postMessage API。这个 API 可以在不同的窗口之间发送消息，因此我们可以在修改 LocalStorage 的同时向当前窗口发送消息，从而触发事件处理程序。具体来说，我们可以在修改 LocalStorage 的脚本中加入以下代码：
----------------------------------------- -----
然后，在 AngularJS 应用程序中添加以下代码：
-------------------------------------- -------- ------- -
-- ------------------------- --- ---------------------- -
-- ------
-
---上述代码中，我们通过 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