如何实现浏览器内多个标签页之间的通信

r囧r小猫 2022-06-09 11:26 259阅读 0赞

**方法1： localStorage:**

localStorage在一个标签页面里面被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里**监听storage事件**，即可得到localStorage存储的值，实现不同标签页之间的通讯。

标签页1：

<input id="name"> <input type="button" id="btn" value="提交"> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var name=$("#name").val(); localStorage.setItem("name", name); }); }); </script>

标签页2：

<script type="text/javascript"> $(function(){ window.addEventListener("storage", function(event){ console.log(event.key + "=" + event.newValue); }); }); </script>

**方法2：cookie+setInterval**

使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

标签页1：

<input id="name"> <input type="button" id="btn" value="提交"> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var name=$("#name").val(); document.cookie="name="+name; }); }); </script>

标签页2：

<script type="text/javascript"> $(function(){ function getCookie(key) { return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key]; } setInterval(function(){ console.log("name=" + getCookie("name")); }, 10000); }); </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器多标签页登录身份刷新

迎关注我的主页 blog.lipeilun.com 背景 1. 用户在浏览器打开一个标签页Tab1，登录身份A 2. 在同一个浏览器中，另外打开一个标签页T...

今天药忘吃喽~/ 2024年04月19日 13:08/ 0 赞/ 65 阅读

相关多线程之间是如何通信的

一.多线程之间通信场景 1.有两个线程，线程1和线程2； 2.线程1向一个集合里面依次添加元素"abc"字符串，一共添加十次，当添加到第五次的时候，希望线程2能够收到线

忘是亡心i/ 2023年10月04日 23:32/ 0 赞/ 50 阅读

相关浏览器内多个标签页之间的通信

1.localStorage 在一个标签页调用localStorage.setItem(name,val)保存数据localStorage.removeItem(name)删

一时失言乱红尘/ 2022年11月25日 13:08/ 0 赞/ 179 阅读

相关多个img标签之间的间隔问题

多个图片之间存在着间隔。 <img src="blog.jpg"> <img src="blog.jpg"> <img src="blog.jpg">

「爱情、让人受尽委屈。」/ 2022年06月12日 04:07/ 0 赞/ 269 阅读

相关如何实现浏览器内多个标签页之间的通信

方法1： localStorage: localStorage在一个标签页面里面被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事

r囧r小猫/ 2022年06月09日 11:26/ 0 赞/ 260 阅读

相关如何实现浏览器内多个标签页之间的通信?

[如何实现浏览器内多个标签页之间的通信?][Link 1] 调用 localstorge、cookies 等本地存储方式方法一：使用localStorage 使用l

蔚落/ 2022年06月06日 06:47/ 0 赞/ 204 阅读

相关如何实现同一浏览器多个标签页之间的通信（一）——localStorage

一、localStorage （1）localStorage是什么？ localStorage对象在修订过的HTML5规范中作为持久保存在客户端数据的方案取代了glob

以你之姓@/ 2022年05月27日 12:28/ 0 赞/ 520 阅读

相关如何实现同一浏览器多个标签页之间的通信（二）——cookie+setInterval

二、cookie （1）cookie是什么？ HTTP Cookie，通常直接叫做cookie，最初是在客户端用于存储回话信息的。该标准要求服务器对任意HTTP请求发送

迈不过友情╰/ 2022年05月26日 00:17/ 0 赞/ 493 阅读

相关 vim用多个标签页打开多个文件

1、打开新标签页启动 Vim 时用 "vim -p filename ..." :tabe[dit]

ゝ一世哀愁。/ 2021年11月16日 12:38/ 0 赞/ 385 阅读

相关实现多个标签页之间通信的几种方法

websocket、setInterval+cookie、localstorage、SharedWorker和postMessage 1.localstorage loca

忘是亡心i/ 2021年11月05日 05:50/ 0 赞/ 794 阅读