多标签页之间的通信
解决方案有两种思路:浏览器端解决方案、服务器端解决方案。
一、浏览器端解决方案:
思路:本地数据存储
<!-- index01.html -->
<input id="name">
<input type="button" id="btn" value="提交">
1. localStorage
原理:localStorage 在所有同源 url 中都是共享的(localStorage 存储在客户端硬盘,两个页面位于不同浏览器也可以共享)。
注意:在不同的页面修改 localStorage,才能够被监听到,相同页面、重复设置相同的值,都是无法被监听的。
用法:
// index01.html
btn.addEventListener('onclick', function () {localStorage.setItem("key", value);
});
// index02.html
window.addEventListener("storage", function (e) {console.log(e);
});
2. Cookie
原理:同源可访问。
注意:cookie 无法监听变化,需要通过一个定时器,每隔一段时间获取一次数据。
用法:
// index01.html
document.cookie = "key=" + value;
// index02.html
function getCookie(key) {// 从cookie中获取并解析数据return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
setInterval(function(){ console.log("key=" + getCookie("key"));
}, 5000);
二、服务器端解决方案:
1. websocket(H5新增的协议)
原理:websocket建立的是全双工通讯,服务器也可以主送发送数据给客户端。只要让服务器作为中转站,就可以实现两个页面的通讯。
// index01.html 与服务器建立 全双工 通讯(index02.html同理)
const socket = new WebSocket('ws://localhost:8080'); // 与服务器建立全双工连接// 连接建立时触发
socket.addEventListener('open', function (event) {socket.send('Hello Server!'); // 发送数据给服务器
});// 客户端接收服务端数据时触发
socket.addEventListener('message', function (event) {console.log('Message from server ', event.data); // 监听服务器传回的数据
});socket.send(); // 发送数据
2. SharedWorker(H5新特性)
首先新建一个worker.js,不必打包到项目中,直接放到服务器即可:
let data = '';
let onconnect = function (e) {let port = e.ports[0];port.onmessage = function (e) {if (e.data === 'getData') {port.postMessage(data)} else {data = e.data}}
}
index01.js、index02.js:
const worker = new SharedWorker('worker.js');// 与worker建立连接
worker.port.start();worker.port.addEventListener('message', function (e) {console.log('worker发来的数据:', e.data);
}, false);setBtn.addEventListener('click', function (e) {worker.port.postMessage(value);
}, false);getBtn.addEventListener('click', function (e) {// 获取发送到worker的数据(约定 'getData' 是获取数据)。worker.port.postMessage('getData');
}, false);
相关文章:
多标签页之间的通信
解决方案有两种思路:浏览器端解决方案、服务器端解决方案。 一、浏览器端解决方案: 思路:本地数据存储 <!-- index01.html --> <input id"name"> <input type"button" id"btn" value"…...
CI/CD -gitlab
目录 一、常用命令 二、部署 一、常用命令 官网:https://about.gitlab.com/install/ gitlab-ctl start # 启动所有 gitlab 组件 gitlab-ctl stop # 停止所有 gitlab 组件 gitlab-ctl restart # 重启所有 gitlab 组件 gitlab-ctl statu…...
AR眼镜_单目光波导VS双目光波导方案
双目光波导AR眼镜方案是一种创新的智能设备,可以在现实场景中叠加虚拟信息,提供增强的视觉体验和交互体验。光学显示方案是AR眼镜的核心技术之一,它对眼镜的性能和使用体验起着决定性的作用。 相比于单目AR眼镜,双目AR眼镜具有更好…...
golang 动态库 (buildmode)
目录 1. golang 动态库2. Golang 生成 C 动态库 .so 和静态库 .a2.1. 源代码2.2. 编译2.3. C2.4. 执行2.5. 如何生成静态库2.6. Go 调用 C 库2.6.1. 源代码 3. golang 语言使用动态库、调用动态链接库3.1. Go 插件系统3.2. 动态加载的优劣3.3. Go 的插件系统: Plugin3.4. 插件开…...
【mysql】2006 - Server has gone away
执行了一组插入语句 提示:2006 - Server has gone away; 2006-服务器已经消失; 消失去哪里了,被黑洞吞没了吗?!!! 网络问题 网络不稳定?断网了?检查网络连…...
动态规划43(Leetcode91解码方法)
代码: class Solution {public int numDecodings(String s) {int n s.length();if(s.charAt(0)0)return 0;if(n1)return 1;int[] dp new int[n1];dp[0]1;dp[1]1;for(int i2;i<n;i){if(s.charAt(i-2)1){dp[i]dp[i-2];}else if(s.charAt(i-2)2&&s.charA…...
STM32电源名词解析
先来简单了解一下各种电源端口的命名 VCC:Ccircuit 表示电路的意思, 即接入电路的电压 VDD:Ddevice 表示器件的意思, 即器件内部的工作电压。 VSS:Sseries 表示公共连接的意思,通常指电路公共接地端电压。 GND:在电…...
openAI宫斗感想 chatGPT带给客户巨大利益的就是王者。王者终究会归来。技术人员不要总是想掌握所有核心技术并用到极致。
1.我很喜欢乔布斯用的iCEO,每个人的工作都是临时的,打掉铁饭碗才会有效率。有铁饭碗就容易使人怠慢、傲慢、嚣张、低效率的消耗自己和别人的生命。日本人为什么对每个人每个客户都毕恭毕敬,感觉因为他的饭碗都掌握在周围的人手里。 日本文化…...
驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接
参考:https://www.cnblogs.com/sam-snow-v/p/15917898.html eclipse链接SQL Server出现问题 笔者使用Open JDK 17,SQL Server 2016,项目中使用JPA操作数据库。测试环境没问题,生产环境出现如题所示“驱动程序无法通过使用安全套接…...
性能调优第一步:服务器硬件如何选型
硬件选型是调优的第一步,无论你是自行购买服务器进行托管,还是租用服务器,或者购买云主机,都要面临的一个问题,那就是选择服务器的硬件配置,因为没有一台服务器能满足所有需求,解决所有的问题。…...
Codewhisperer 使用评价
最近亚⻢逊推出了一款基于机器学习的 AI 编程助手 Amazon CodeWhisperer,可以实时提供代码建议。在编写代码时,它会自动根据现有的代码和注释给出建议。Amazon CodeWhisperer 与GitHub Copilot类似,主要的功能有: 代码补全注释和文档补全代码…...
结合scss实现黑白主题切换
是看了袁老师的视频后,自己做了一下练习。原视频地址: b站地址https://www.bilibili.com/video/BV15z4y1N7jB/?spm_id_from333.1007.top_right_bar_window_history.content.click&vd_sourcec6cf63302f28d94ebc02cbedcecc57ea首先创建一个全局的scs…...
go-zero对数据库的操作
一、go-zerro中结合gorm来操作mysql数据库 1、这里我这就直接结合gorm-gen的方式来实现数据库操作,关于gorm-gen可以参考官网 2、创建一个数据库,并且创建一个表 -- ------------------------ -- 用户表 -- ------------------------ DROP TABLE IF EXISTS user; C…...
Mac git查看分支以及切换分支
查看本地分支 git branch 查看远程仓库分支 git branch -r 查看本地与远程仓库分支 git branch -a 切换分支 git checkout origin/dev/js...
Qt调起Mac“系统设置”面板
mac系统设置相关字段: Accessibility 面板相关 项目 URL Scheme Main x-apple.systempreferences:com.apple.preference.universalaccess Display x-apple.systempreferences:com.apple.preference.universalaccess?Seeing_Display Zoom x-apple.systempreference…...
小程序如何刷新当前页面
小程序可以通过调用wx.pageScrollTo()方法来实现刷新当前页面,该方法可以滚动页面并使页面滚动到顶部,从而达到刷新页面的效果。具体的操作步骤如下: 在需要刷新的页面中添加一个按钮或其他触发事件的元素。 绑定相应的点击事件,…...
OSI参考模型
目录 一. OSI参考模型的各层功能二. 网络排错三. 网络安全四. 实体、协议、服务和服务访问点SAP五. TCP IP体系结构 一. OSI参考模型的各层功能 \quad \quad \quad \quad 我们首先来看应用层实现的功能 每个字段的各种取值所代表的意思 \quad \quad 比如要保存的文件内容是ab…...
(c语言进阶)内存函数
一.memcpy(void* dest,void* src,int num) ,操作单位为字节,完成复制且粘贴字符串 1.应用 #include <stdio.h> #include<string.h> int main() {int arr1[] { 1,2,3,4,5,6,7,8,9,10 };int arr2[20] { 0 };memcpy(arr2, arr1, 20);//从…...
【2023春李宏毅机器学习】快速了解机器学习基本原理
文章目录 机器学习约等于机器自动找一个函数 机器学习分类 regression:输出为连续值classification:输出为一个类别structured learning:又叫生成式学习generative learning 生成有结构的物件(如:影像、句子…...
人工智能:科技的魔术师
引言: 人工智能(Artificial Intelligence,简称AI)作为一项前沿技术,正以惊人的速度改变着我们的生活。它像魔术师一样,能够解决我们的问题、提供建议,甚至预测未来。从智能手机到智能家居&…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识:什么是 B-Tree 和 BTree? B-Tree(平衡多路查找树) BTree(B-Tree 的变种) 二、结构对比:一张图看懂 三、为什么 MySQL InnoDB 选择 BTree? 1. 范围查询更快 2…...
深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中,我们训练出的神经网络往往非常庞大(比如像 ResNet、YOLOv8、Vision Transformer),虽然精度很高,但“太重”了,运行起来很慢,占用内存大,不适合部署到手机、摄…...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目,设置虚拟环境,出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...
高抗扰度汽车光耦合器的特性
晶台光电推出的125℃光耦合器系列产品(包括KL357NU、KL3H7U和KL817U),专为高温环境下的汽车应用设计,具备以下核心优势和技术特点: 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计,确保在…...
Axure零基础跟我学:展开与收回
亲爱的小伙伴,如有帮助请订阅专栏!跟着老师每课一练,系统学习Axure交互设计课程! Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题:Axure菜单展开与收回 课程视频:...
机器学习复习3--模型评估
误差与过拟合 我们将学习器对样本的实际预测结果与样本的真实值之间的差异称为:误差(error)。 误差定义: ①在训练集上的误差称为训练误差(training error)或经验误差(empirical error&#x…...
