window.onstorage监听localStorage变化

localStorage监听

格來羙、日出

885人浏览 · 2022-09-23 18:47:05

格來羙、日出 · 2022-09-23 18:47:05 发布

切记，需要以下2点：

1、 localStorage发生变化，初次设置值不生效。

2、不同的浏览器tab，本页面不生效。比如打开了a.html和b.html，a.html设置了一个值，b.html去修改值，事件才会生效

3、在中间件下测试，比如tomcat，nginx

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function save() {
            localStorage.setItem("change-event", new Date().getTime())
        }
        function change() {
            localStorage.setItem("change-event",new Date().getTime())
        }	
		
        window.onstorage = function (e) {
            console.log(e)
            console.log(`The ${e.key} key has been changed from ${e.oldValue} to ${e.newValue}.`);
        };		
    </script>
</head>

<body>
    <button onclick="save()">localstorge click</button>
	<br>
	<iframe src="./b.html">
	</iframe>
	
</body>

</html>

解决同一个页面下的瓶颈，使用iframe

通知仅在不同的上下文中接收。这意味着不同的页面，不要期望在同一页面中不同对象的上下文中使用本地存储进行通信。一些浏览器会考虑将“同一页面”应用于当前页面内的不同 iframe。Chrome 和 Firefox 的行为似乎符合预期，您可以在同一页面中的不同 iframe 之间进行通信，但为了更好地使用发布消息，请尽可能使用。

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..