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

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

news 2026/2/8 11:25:15

当使用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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/8 4:37:39

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/1/25 16:39:17

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/2 2:30:58

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

编程新知 2026/1/31 9:00:14

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2026/1/27 17:00:20

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/10/6 15:50:41

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙：被低估的"智能安检员"二、优先尝试！90%问题无需关闭防火墙方案1：程序白名单（解决软件误拦截）方案2：开放特定端口（解决网游/开发端口不通）三、命令行极速关闭方案方法一：PowerShell（推荐Win10/11）​方法二：CMD命令…...

编程新知 2025/8/27 20:07:03