在前端开发中，监听 localStorage 的变化并不是直接通过监听事件来实现的，因为 localStorage 并没有提供类似 addEventListener 的方法。不过，我们可以通过轮询（polling）或者利用 window 对象的 storage 事件来间接监听 localStorage 的变化。

这里，我将向你展示如何使用 storage 事件来监听 localStorage 的变化。需要注意的是，storage 事件只会在其他页面（非当前页面）对 localStorage 进行修改时触发。

以下是一个简单的示例，展示了如何使用 storage 事件来监听 localStorage 的变化：

window.addEventListener('storage', function(event) {
  if (event.key !== null && event.newValue !== null) {
    console.log('localStorage key:', event.key);
    console.log('localStorage new value:', event.newValue);
    // 在这里你可以根据需要对 localStorage 的变化做出响应
  }
});

这段代码会监听所有其他页面对 localStorage 的修改，并打印出被修改的键和新的值。

如果你需要监听当前页面对 localStorage 的修改，你可能需要使用轮询的方法，但这通常不是最佳实践，因为它可能会对性能产生影响。

另一种方法是封装一个自定义的 localStorage 设置函数，每次设置值时都触发一个自定义的事件。这样，你就可以监听这个自定义事件来响应 localStorage 的变化。这种方法需要你在整个应用中都使用这个封装的函数来操作 localStorage。

请注意，storage 事件在不同的浏览器标签页之间是共享的，所以它可以用来实现跨标签页的通信。但是，它不能用来监听当前页面内的 localStorage 变化。如果你需要在当前页面内监听变化，你可能需要重新设计你的应用架构或使用其他通信机制。