前端进阶：轻松拿捏 localStorage 的即时响应

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

同页面下 LocalStorage 变更如何即时捕捉？

localStorage作为浏览器中常用的本地存储方案，方便我们存储一些数据。不过，浏览器原生的storage事件，只会在同源的不同页面之间localStorage发生变化时触发。倘若在同一个页面里修改了localStorage，这个事件就像一位沉默的观察者，静静地看着一切，却不做任何响应。这种“灯下黑”现象让开发者们颇为头疼。面对这个问题，轮询虽然可行，但它吃资源厉害，而且无法保证监听到信息修改变化，并不是长久之计。下面将介绍几种有效的应对策略，助你在同一个页面下也能实现localStorage变化的实时监听。

方案一：使用StorageEvent

我们可以主动构建并发送StorageEvent事件，在设置localStorage数据后，手动构建并发布一个事件：

而原有的事件监听器无需改动，就可以同时处理同页及跨页面的localStorage变更了：

这种方式非常直观且高效，不过，必须确保每次设置操作都要跟一次事件触发操作，才能实现有效监听。

方案二：个性化定制的CustomEvent

如果觉得StorageEvent的能力有些过剩，也可以使用更为灵活的CustomEvent，实现自己需要的个性化效果。具体可以这样做：

相应地，我们的监听器要调整为监听这个自定义事件：

CustomEvent为事件传递提供了更大的发挥空间。无论是传递基本数据，还是复杂的对象结构，亦或是执行某些特定动作，统统可以。然而，和StorageEvent方案一样，也需保证设置与触发成对出现。

方案三：消息传递 —MessageChannel

在较为复杂的需求中，需要让同一页面的不同模块可以同步数据，MessageChannel就显得得心应手了。例如，我们可以在一个模块里设置数据：

然后，在需要获取信息的模块中，进行消息监听：

MessageChannel开辟了一条专门用于传递信息的通道，适用于各模块需实时同步数据的场景，能让代码逻辑更加清楚。

方案四：全局广播BroadcastChannel

而BroadcastChannel则是一个更加强大的存在，它支持跨页面，甚至是跨窗口的消息同步。利用它来传递localStorage的变更，好比发送了一次“全员通知”：

在任意地方，只要监听该频道，即可接收到变更通知：

当应用需要在多个窗口间保持同步，使用这个工具尤为得心应手。需要说明，它的使用范围更加宽泛，并不局限于同一个页面内部。

方案选用和优劣分析

那么，在众多的解决方案中，该如何根据项目特点做出合适的选择呢？

1. 对于同一页面下需要精确监听localStorage变化的场景，优先考虑主动触发的StorageEvent或CustomEvent，两者实现都相对简洁。

2. 若希望系统拥有良好的扩展能力，需要自定义一些特殊操作，选CustomEvent更加合适。

3. 当页面中不同模块需要频繁交换各种数据信息，选MessageChannel能够保证同步顺畅且高效。

4. 如果是多窗口或多标签之间的协同工作，用BroadcastChannel将更为有效。

技术应用：如何在主流框架中使用

结合如React、Vue等现代 JavaScript 框架时，依然可以运用上面的知识来对localStorage变更进行巧妙管理。这里我们继续以自定义的StorageEvent为例，看一下具体的用法。

实战 React：

在React的组件中可以这样：

实战 Vue：

在Vue组件中我们这样使用：

可以看出，结合框架的生命周期钩子进行事件的注册和移除，并搭配合适的手动触发策略，便可以精准掌控localStorage的变化，及时更新应用状态，优化用户体验。