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

调用 localstorge、cookies 等本地存储方式

方法一:使用localStorage

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作

  window.addEventListener("storage",function(event){

       $("#name").val(event.key+”=”+event.newValue);

  });

方法二、使用cookie+setInterval

    <inputidinputid="name"><input type="button" id="btnOK"value="发送">

    

$(function(){

$("#btnOK").click(function(){

varname=$("#name").val();

document.cookie="name="+name;

});

});

//获取Cookie天的内容

function getKey(key) {

return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];

}

//每隔1秒获取Cookie的内容

setInterval(function(){

console.log(getKey("name"));

},1000);

时间: 2024-10-03 07:36:18

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

浅谈两种方法实现浏览器内多个标签页之间的通信

调用localstorge.cookies等本地存储方式. 方法一: localstorge在一个标签页里被添加.修改或删除时,都会触发一个storage事件,通过在另一个标签页里监听storage事件,即可得到localstorge存储的值,实现不同标签页之间的通信. <input id="name"> <input type="button" id="btn" value="提交"> <scr

利用cookie实现浏览器中多个标签页之间的通信

原理: cookie是浏览器端的存储容器,而且它是多页面共享的,利用cookie多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到cookie中),一个标签页接收消息(从cookie中获取消息) 例子:   01 发送消息的标签页(其实就是将要发送的消息设置到cookie中) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

(转)如何实现同一浏览器多个标签页之间的通信(二)——cookie+setInterval

二.cookie (1)cookie是什么? HTTP Cookie,通常直接叫做cookie,最初是在客户端用于存储回话信息的.该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分,其中包含回话信息.浏览器会存储这样的回话信息,并在这之后,通过每个请求添加Cookie HTTP头将信息发回服务器. (2)cookie怎么用? 在JavaScript中,cookie的接口即document.cookie不太友好,可以自己封装相应的接口. 基本cookie操作:读

webdriver高级应用- 浏览器中新开标签页(Tab)

#encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con VK_CODE ={'ctrl':0x11, 't':0x54, 'tab':0x09} # 键盘键按下 def keyDown(keyName): win32api.keybd_event(VK_CODE[keyName], 0, 0, 0) # 键盘键抬起 def keyUp(keyName)

在jsp中同一页面中多个标签页之间切换数据展示

示例图片: 像这样的上面多个tab页下面也有多个tab页面,其实只要学会一个嵌套就可以了,现在就说一下简单的一个页面的多个tab页面的展示

内网和外网之间的通信

对于初学者而已,我们学习的网络编程(如TCP,UDP编程),我们通常都是在局域网内进行通信测试,有时候我们或者会想,我们现在写的内网网络数据和外网的网络数据有什么不同,我们内网的数据是如何走出外网的呢? 再者,我们大多人都是使用宽带上网,结果发现,A 和 B 的局域网 IP 都是192.168.31.11,当他们都访问百度浏览网页时,百度服务器回复数据时,如何区分是给 A 还是给 B 呢? 公有 IP 和私有 IP 的区别 首先,我们需要了解一下什么是公有 IP 和私有 IP ? 公有地址(Pu

(端口映射原理)内网和外网之间的通信

首先解释一下"内网"与"外网"的概念: 内网:即所说的局域网,比如学校的局域网,局域网内每台计算机的IP地址在本局域网内具有互异性,是不可重复的.但两个局域网内的内网IP可以有相同的. 外网:即互联网,局域网通过一台服务器或是一个路由器对外连接的网络,这个IP地址是惟一的.也就是说内网里所有的计算机都是连接到这一个外网IP上,通过这一个外网IP对外进行交换数据的.也就是说,一个局域网里所有电脑的内网IP是互不相同的,但共用一个外网IP.(用ipconfig/all查

在浏览器的标签页显示网站标志图标(或指定图标)的方法

对于不同的浏览器,方法是有差别的1.对于IE或TT浏览器:把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索2.这大概是所有浏览器通用的在标签页加入指定图标的方法:把favicon.ico图标放到网站根目录下,在网页的<head></head>中加入<link rel="shortcut icon" href="favicon.ico" type="image/x-icon&

小结一下,登录如何判断不同标签页登录两个账号的问题

今天无意中作出了,检测两个标签页登录两个账号的方法: 是这样的,这个项目,如果多账号登录的话,会出现一些古怪的现象,两个账号的个人信息不一样,支付订单信息却是一样的,同步的,这很可怕, 出现这样的原因是,代码不够规范,后端有用session来判断是不是同一个人的,也有的接口是根据userid来获取信息的,我将一些项目的配置信息存在了vuex中,并将vuex中的state值在刷新前都会在localStorage中存一份,放置刷新页面后vuex中的值丢失.(这个是一个小突破,但不是今天的重点). 问