前言
在前端开发中，我们经常需要在用户的浏览器中存储一些数据，以便在用户重新访问网站时能够快速获取这些数据。Web Storage API 提供了这样的功能，它允许我们存储数据在用户的本地存储中。其中，localStorage 是一个非常常用的存储方式，它提供了一个简单的键值对存储系统。但是，你可能不知道，当你在本地存储中修改数据时，浏览器会触发一个特殊的事件——storage事件。本文将带你深入了解这个事件，以及如何利用它来实现跨页面的数据同步。
LocalStorage与storage事件
localStorage 是 Web Storage API 的一部分，它允许数据在浏览器会话之间持久存储。当你在同一个域下的任何窗口或标签页中修改了 localStorage 中的数据时，浏览器会触发一个 storage 事件。这个事件可以被用来监听和响应数据的变化，实现不同页面之间的数据同步。
storage事件的属性
当 storage 事件被触发时，它会携带一些有用的属性，这些属性可以帮助我们了解发生了什么变化：
key：被修改的键。newValue：修改后的新值。oldValue：修改前的旧值。storageArea：指向触发事件的Storage对象。url：触发storage事件的页面的地址。
需要注意的是，storage 事件只在同一个域下的页面之间触发，并且只在存储的数据实际发生变化时才会触发。
实践示例
为了更好地理解 storage 事件，让我们通过一个简单的示例来演示它的工作原理。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage Example</title>
</head>
<body>
<script>
localStorage.setItem("name", "谢杰");
localStorage.setItem("age", "20");
console.log("信息已经设置!");
</script>
</body>
</html>
在这个页面中，我们设置了两个 localStorage 数据项。
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage Listener Example</title>
</head>
<body>
<script>
let name = localStorage.getItem("name");
let age = localStorage.getItem("age");
console.log(`姓名为${name},年龄为${age}`);
window.addEventListener("storage", (e) => {
console.log(`${e.key}从${e.oldValue}修改为${e.newValue}`);
console.log(e.storageArea);
console.log(`被改变的url为${e.url}`);
}, true);
</script>
</body>
</html>
在第二个页面中，我们添加了一个 storage 事件监听器。一旦同一域下的其他页面修改了 localStorage 中的数据，这个监听器就会被触发，并在控制台中输出变化的详细信息。
注意事项
storage事件不会在触发它的页面上被触发，只会在其他页面上触发。- 为了演示
storage事件，你需要在服务器上打开这些HTML文件，因为本地文件系统不会触发这个事件。
结语
通过本文的介绍，你应该对 localStorage 和 storage 事件有了更深入的理解。利用这个事件，你可以实现跨页面的数据同步，提升用户体验。记得在实际开发中合理使用这个特性，以避免不必要的性能开销。
