当前位置： 首页 > news >正文

如何使用Web Storage对页面中数据进行监听？

news 2025/12/22 13:02:54

当使用Web Storage存储的数据发生变化时，会触发Window对象的storage事件，我们可以监听该事件并指定事件处理函数，当其他页面中的localStorage或 sessionStorage中保存的数据发生改变时，就会执行事件处理函数。

监听storage事件的示例代码如下：

// window.addEventListener(事件名， 事件处理画数）；
window.addEventListener('storage', function (event) {console.log(event.key);
}):

上述代码中，事件处理函数接收一个event对象作为参数，event对象的key属性保存发生变化的数据的键名。event对象具有的一些属性，如表所示。

event对象属性

需要注意的是，storage事件并不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。通过这种机制，可以实现多个页面之间的通信。

由于sessionStorage无法在不同标签页的网页中互相访问数据，当使用storage事件时，可以将页面放在iframe标签创建的框架中，此时在框架内通过storage事件可以监听外层页面的sessionStorage的数据变化。

对storage事件有了基本了解之后，下面演示如何使用storage事件对页面中的数据进行监听。我们通过两个页面进行演示，第1个页面demo03-l.html 用来修改localstorage数据，第2个页面demo03-2.html 用来监听数据的变化并实现数据的同步。

(1)创建C:\codechapter02demo03-1.html，定义一个文本框用来输入用户名，定义一个“保存”按钮用来将文本框中的用户名保存在localstorage中，具体代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><label>用户名：</label><input type="text" id="username"><button id="save">保存</button><script>var lsername = document.querySelector ('#username');//单击”保存“按钮，设置数据document.querySelector('#save').onclick=function() {var val=username.value; // 获取username里面的值localStorage.setItem('username', val);};</script>
</body>
</html>

在上述代码中，第8行代码的文本框用于输入用户信息;第l3~16行代码用于设置localstorage的数据。

(2)保存代码，在浏览器中进行测试，效果如图所示。

初始页面效果

初始页面效果

(3)在图2-8所示的文本框中输入“userl”，单击“保存”按钮，然后进入开发者工具的Application选项卡，找到Local Storage选项并单击该选项下的http://127.0.0.1:5500地址，可以看到设置的localStorage中Key的值为“usermame”，Value的值为“userl”的数据，如图所示。

1692598342651_按钮.png

设置数据

(4)创建C:kcodelchapter02\demo03-2.html,通过storage事件监听数据的变化，并定义两个标签用来显示数据修改前和修改后的值，具体代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>document</title>
</head>
<body><span>新的用户名：</span><span id="newval"></span><br><span>旧的用户名：</span><span id="oldval"></span><script>var newdata=document.getElementById('newval');var olddata=document.getElementById('oldval');window.addEventListener('storage', function(e){     newdata.innerHTMLme.newValue:       //设置元素的内容为修改后的值olddata.innerHTML=e.oldValue;       //设置元素的内容为修改前的值});
</script>
</body>
</html>

上述代码中，第9行代码和第12行代码定义了两个标签，用来显示数据被修改后和数据修改前的值;第16~19行代码通过storage事件获取e.newValue和e.oldValue的值并显示到标签中。

(5)保存代码，在浏览器中进行测试，效果如图2-10所示。

1692603561249_测试.png

页面初始效果

(6)切换到demo03-1.html页面,在文本框中输入“user2”，然后单击“保存”按钮。再切换到demo03-2.html网页，效果如图2-11所示。

1692603825239_用户名1.png

修改后与修改前的用户名

从图2-11可以看出，页面显示新的用户名为“user2”，旧的用户名为“userl”。由此可知，通过storage事件可以监听 localStorage数据发生的变化。

相关文章：

如何使用Web Storage对页面中数据进行监听？

当使用Web Storage存储的数据发生变化时&#xff0c;会触发Window对象的storage事件&#xff0c;我们可以监听该事件并指定事件处理函数&#xff0c;当其他页面中的localStorage或 sessionStorage中保存的数据发生改变时&#xff0c;就会执行事件处理函数。 监听storage事件的…...

编程日记 2023/9/9 19:57:27

GO语言网络编程（并发编程）runtime包

GO语言网络编程&#xff08;并发编程&#xff09;runtime包 1. runtime包 1.1.1. runtime.Gosched() 让出CPU时间片&#xff0c;重新等待安排任务(大概意思就是本来计划的好好的周末出去烧烤&#xff0c;但是你妈让你去相亲,两种情况第一就是你相亲速度非常快&#xff0c;见…...

编程日记 2023/9/9 19:56:26

MR源码解析和join案例

MR源码解析 new Job(): 读取本地文件, xml配置job.start(): 启动线程job的run():线程方法 runTasks(): 传入对应的接口&#xff0c;启动map或者reduceMapTask类的run(): 设置map阶段的参数&#xff0c;初始化任务&#xff0c;创建上下文对象 创建读取器LineRecordReader判断是…...

编程日记 2023/9/9 19:55:25

ML+LLMs：利用LLMs大语言模型赋能或者结合ML机器学习算法进行具体应用的简介、具体案例之详细攻略

ML+LLMs：利用LLMs大语言模型赋能或者结合ML机器学习算法进行具体应用的简介、具体案例之详细攻略 目录 利用LLMs赋能或者结合ML算法进行具体应用的简介...

编程日记 2023/9/9 19:54:24

python GIL锁

1、GIL是什么 GIL&#xff1a;Global Interpreter Lock又称全局解释器锁。简单来说是一个互斥锁&#xff0c;每个线程在执行的过程中都需要先获取GIL&#xff0c;作用就是限制多线程同时执行&#xff0c;使得在同一进程内任何时刻仅有一个线程在执行。 由于GIL的存在&#xff0…...

编程日记 2023/9/9 19:53:24

git打tag和版本控制规范

我们在开发中经常会遇到要打tag的情况&#xff0c;但这个tag应该如何打呢&#xff1f;我不知道大家平时是怎么打的&#xff0c;但我基本就是从1.0.0开始进行往上递增&#xff0c;至于如何递增&#xff0c;基本凭感觉。今天同事新打了一个tag进行发版&#xff0c;然后被架构点名…...

编程日记 2023/9/9 19:52:22

php版 短信跳转微信小程序

实现这功能首先&#xff0c;小程序端添加业务域名 php代码 <?php declare (strict_types1);namespace app\controller\Admin;use app\model\Set; use app\Request;class Admin_Url_Scheme {public function getScheme(Request $request) {$appid 小程序appid;$secret 小…...

编程日记 2023/9/9 19:51:21

leetcode127单词接龙刷题打卡

127. 单词接龙 字典 wordList 中从单词 beginWord 和 endWord 的 转换序列 是一个按下述规格形成的序列 beginWord -> s1 -> s2 -> ... -> sk&#xff1a; 每一对相邻的单词只差一个字母。对于 1 < i < k 时&#xff0c;每个 si 都在 wordList 中。注意&am…...

编程日记 2023/9/9 19:50:20

基于SSM的物流管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

编程日记 2023/9/9 19:49:19

EagleSDR USB HAT FT600

给EagleSDR做了个USB 3.0的子卡&#xff0c;采用FT600方案&#xff0c;实物如下&#xff1a; 用FT600DataStreamerDemoApp测试&#xff0c;速度如下&#xff1a; 由于FT600是16bit的接口&#xff0c;如果用FT601的32bit接口&#xff0c;性能应该还会有大幅提升。 测试代码很简…...

编程日记 2023/9/9 19:48:19

Java多线程（四）锁策略（CAS，死锁）和多线程对集合类的使用

锁策略&#xff08;CAS&#xff0c;死锁&#xff09;和多线程对集合类的使用 锁策略 1.乐观锁VS悲观锁 2.轻量级锁VS重量级锁 3.自旋锁VS挂起等待锁 4.互斥锁VS读写锁 5.可重入锁vs不可重入锁 死锁的第一种情况 死锁的第二种情况 死锁的第三种情况 CAS 1.实现原子类 …...

编程日记 2023/9/9 19:47:18

基于spring boot+ vue+ mysql开发的UWB室内外定位系统源码

现代制造业厂区面积大、人员数量多、物资设备不断增加&#xff0c;随着工业信息化技术的发展&#xff0c;大型制造企业中对人员、车辆、物资的管理要求越来越细致。 高精度定位管理系统使用UWB室内定位技术&#xff0c;通过在厂区安装定位基站&#xff0c;为人员或设备佩戴定位…...

编程日记 2023/9/9 19:46:17

第2章_瑞萨MCU零基础入门系列教程之面向过程与面向对象

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…...

编程日记 2023/9/9 19:45:15

数字图像处理:亮度对比度-几何变换-噪声处理

文章目录 数字图像增强亮度与对比度转换几何变换图像裁剪尺寸变换图像旋转 噪声处理添加噪声处理噪声 数字图像增强 亮度与对比度转换 图像变换可分为以下两种&#xff1a; 点算子&#xff1a;基于像素变换&#xff0c;在这一类图像变换中&#xff0c;仅仅根据输入像素值计算…...

编程日记 2023/9/9 19:44:14

maven报错：[ERROR] 不再支持源选项 7。请使用 8 或更高版本。

解决方案 pom.xml文件中增加maven编译的java.version jdk版本设置&#xff0c;以及maven.compiler.source 资源编译jdk版本设置和maven.compiler.target 资源构建jdk版本设置 JDK&#xff1a;6~8 一般都是1.6&#xff0c;1.7&#xff0c;1.8的写法。 <properties><…...

编程日记 2023/9/9 19:43:14

MySQL基础3-约束

MySQL基础3-约束 一. 约束概述1.1 概念1.2 目的1.3 分类 二. 约束演示三. 外键约束3.1 概念3.2 语法三. 删除/更新行为 一. 约束概述 1.1 概念 约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据 1.2 目的 保证数据库中数据的正确、有效性和完整…...

编程日记 2023/9/9 19:42:13

OJ练习第166题——课程表（拓扑排序问题）

课程表 力扣链接&#xff1a;207. 课程表 题目描述 你这个学期必须选修 numCourses 门课程&#xff0c;记为 0 到 numCourses - 1 。 在选修某些课程之前需要一些先修课程。 先修课程按数组 prerequisites 给出&#xff0c;其中 prerequisites[i] [ai, bi] &#xff0c;表…...

编程日记 2023/9/9 19:41:12

单臂路由实现VLAN间路由

单臂路由实现VLAN间路由 单臂路由 概述拓扑图PC配置LSW2 接入层交换机LSW3 接入层交换机LSW1 汇聚层交换机R1 路由器ping 测试 单臂路由 概述 单臂路由的原理是通过一台路由器&#xff0c;使 VLAN 间互通数据通过路由器进行三层转发。 如果在路由器上为每个 VLAN 分配一个单独…...

编程日记 2023/9/9 19:40:11

【VSCode】文件模板创建及使用.md

背景 最近使用VSCode学习Vue项目比较频繁&#xff0c;每次创建Vue文件都要手动写重复代码&#xff0c;特别麻烦&#xff0c;就上网查找自动生成代码的说明&#xff0c;结果发现VSCode有代码模板&#xff0c;怪怪&#xff0c;感觉发现新大陆了(low!)。 配置 打开配置 方式一&a…...

编程日记 2023/9/9 19:39:09

【漏洞复现】EnjoySCM存在文件上传漏洞

漏洞描述 EnjoySCM是一款适应于零售企业的供应链管理软件，主要为零售企业的供应商提供服务。EnjoySCM的目的是通过信息技术，实现供应商和零售企业的快速、高效、准确的信息沟通、管理信息交流。。 该系统存在任意文件上传漏洞，攻击者通过漏洞可以获取服务器的敏感信息。 …...

编程日记 2023/9/9 19:38:08

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/12/19 13:12:47

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/12/14 0:24:50

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/12/16 14:36:58

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/12/17 1:15:45

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/12/7 12:35:20

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/10/2 5:21:30

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/12/12 21:35:24