使用localStorage实现页面之间通信，一个页面发生变化，另一个页面也同时发生变化

程序员文章站 2022-06-24 19:06:18

不知道大家在平时开发过程中有没有遇到这种需求，浏览器打开两个窗口，一个发生变化，另一个也要同时发生变化。这种需求怎么实现呢，可以参考使用localStorage实现。简单介绍一下localStorage：在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。loca...

不知道大家在平时开发过程中有没有遇到这种需求，浏览器打开两个窗口，一个发生变化，另一个也要同时发生变化。这种需求怎么实现呢，可以参考使用localStorage实现。

简单介绍一下localStorage：在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除，localStorage 属性是只读的，属性允许在浏览器中存储 key/value 对的数据，并且只能存储字符串类型的数据。

与之对应的还有一个sessionStorage ，:如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性，该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

下面就使用localStorage解决上面的需求：

编写两个页面，page1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>page1</title>
    <script>
        function setTime() {
			// 先remove再set,保证每次set事件都可以监听到
			localStorage.removeItem("time");
			localStorage.setItem("time", new Date().toLocaleString());
        }
    </script>
</head>
<body>
    <p><button onclick="setTime()" type="button">点我</button></p>
</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page2</title>
<script>
// 监听localStorage的存储事件，set的时候会触发
window.addEventListener("storage", function (e) {
	document.getElementById("time").innerHTML = e.newValue;
});
</script>
</head>
<body>
从page1页面获取的值：<label id="time"></label>
</body>
</html>