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

news2024/12/23 13:23:50

当使用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数据发生的变化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/988003.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java实现SFTP传输

一、SFTP是什么&#xff1f; SFTP&#xff08;SSH File Transfer Protocol&#xff09;是一种基于SSH&#xff08;安全外壳&#xff09;的安全的文件传输协议&#xff0c;使用SFTP协议可以在文件传输过程中提供一种安全的网络的加密算法&#xff0c;从而保证数据的安全传输 S…

Win11打不开组策略编辑器怎么办

近期有小伙伴反映在使用Win11打开组策略编辑器的时候发现无法打开&#xff0c;这是怎么回事&#xff0c;遇到这种问题应该怎么解决呢&#xff0c;下面小编就给大家详细介绍一下Win11打不开组策略编辑器的解决方法&#xff0c;有需要的小伙伴快来和小编一起看看吧。 Win11打不开…

系统架构设计师-嵌入式系统

目录 一、嵌入式系统概述 1、基本概念 2、嵌入式系统软件组成架构 二、嵌入式软件开发 三、嵌入式硬件 1、嵌入式微处理器 2、人工智能芯片 3、嵌入式微处理器体系结构 4、总线 四、嵌入式操作系统 1、嵌入式实时操作系统 2、操作系统内核架构 3、鸿蒙操作系统 五、嵌入式…

【数据结构-队列】双端队列

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

【多线程】阻塞队列实现原理代码实现

目录 一、概念 二、优势 三、原理&#xff08;代码逐步实现&#xff09; 四、BlockingQueue的使用 一、概念 阻塞队列是一种的特殊的队列&#xff0c;他是带有阻塞的线程安全的队列。当队列已满时入队操作就会进入阻塞&#xff0c;当队列不空时才能执行入队操作&#xff1b…

抓安卓日志命令

临时生成logcat文件 ctrl z 是停止 adb logcat -> /home/log/log.txt 导出全部日志 adb root adb remount 只抓安卓日志 logcat &#xff08;所有保存的日志&#xff0c;中途关机和开机都有&#xff09; adb pull log/android D:\73log\1android 抓全部日志&#x…

《DevOps实践指南》- 读书笔记(四)

DevOps实践指南 Part 3 第一步 &#xff1a;流动的技术实践11. 应用和实践持续集成11.1 小批量开发与大批量合并11.2 应用基于主干的开发实践11.3 小结 12. 自动化和低风险发布12.1 自动化部署流程12.1.1 应用自动化的自助式部署12.1.2 在部署流水线中集成代码部署 12.2 将部署…

从零开始,手把手教你视频直播app源码开发

在今天移动互联网时代&#xff0c;视频直播成为了人们沟通、互动和分享的重要方式。如果你梦想着拥有自己的视频直播应用程序&#xff0c;那么现在是时候开始学习开发视频直播app的源码了&#xff01;本文将带您从零开始&#xff0c;手把手教你如何开发视频直播app源码&#xf…

数据通信网络之IPv6基础

文章及资源归档至公众号【AIShareLab】&#xff0c;回复 通信系统与网络 可获取。 文章目录 一、目的二、环境及网络拓扑三、需求四、步骤及结果分析 一、目的 掌握网络设备静态IPv6 地址配置的方法。掌握IPv6 地址无状态自动配置的应用。掌握通过DHCPv6 部署IPv6 地址配置自动…

inappropriate address 127.0.0.1 for the fudge command, line ignored 时间同步的时候报错

1、安装ntp服务后&#xff0c;启动ntpd正常&#xff0c;但是在查看ntpd服务状态时&#xff0c;有一个红色的报错&#xff0c;报错信息如下&#xff1a; inappropriate address 127.0.0.1 for the fudge command, line ignored 2、解决方法&#xff1a;编辑ntp配置文件&#xf…

群晖NAS:通过Docker 部署宝塔面板【注册表:cyberbolt/baota】

群晖NAS&#xff1a;通过 Docker 部署宝塔面板【注册表&#xff1a;pch18/baota】 由于 docker 源地址被墙&#xff0c;在面板里面查询不到注册表&#xff0c;使用 ssh 命令行拉取 1、打开 SSH&#xff0c;链接后打开命令行 这里不赘述&#xff0c;具体自行百度 2、下载 镜像…

51单片机的简易篮球计分器倒计时仿真设计( proteus仿真+程序+原理图+报告+讲解视频)

51单片机的简易篮球计分器倒计时仿真设计( proteus仿真程序原理图报告讲解视频&#xff09; 1.主要功能&#xff1a;2.仿真3. 程序代码4. 原理图5. 设计报告6. 设计资料内容清单&&下载链接 51单片机的简易篮球计分器倒计时仿真设计( proteus仿真程序原理图报告讲解视频…

代码随想录第33天 | ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

509. 斐波那契数 //法一&#xff1a; /*** param {number} n* return {number}*/ var fib function(n) {let bpnew Array(n)bp[0]0bp[1]1for(let i2;i<n;i){bp[i]bp[i-1]bp[i-2]}return bp[n] };//法二&#xff0c;时间少&#xff0c;空间少&#xff0c;只需要维护两个数值…

宝宝餐椅上亚马逊要求的合规标准有哪些?

宝宝餐椅上架亚马逊需要做什么认证&#xff1f; 大家都知道儿童餐椅是宝宝饮食的重要伙伴。它们为宝宝提供了一个舒适的环境&#xff0c;让宝宝在吃饭的时候更愉快&#xff0c;更健康。然而&#xff0c;许多家长可能不知道&#xff0c;亚马逊美国站售卖的儿童餐椅需要进行一系…

2023国赛数学建模E题思路代码 - 黄河水沙监测数据分析

# 1 赛题 E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响&#xff0c; 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…

HGDB-修改分区表名称及键值

瀚高数据库 目录 环境 文档用途 详细信息 环境 系统平台&#xff1a;N/A 版本&#xff1a;4.5.7 文档用途 使用存储过程拼接SQL&#xff0c;修改分区名称、分区键值、并重新加入主表&#xff0c;适用于分区表较多场景。 详细信息 说明&#xff1a;本文档为测试过程&#xff1…

15 轮转数组

轮转数组 题解1 环状替换&#xff08;学习思想&#xff09;&#xff08;空间O(1)&#xff09;题解2 翻转数组&#xff08;有意思好理解&#xff09;&#xff08;空间O(1)&#xff09;题解3 空间O(N)秒答 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&a…

护眼台灯A级好还是AA级好?盘点五款AA级台灯

台灯如何选择&#xff0c;随着人们生活水平的提高及科技的不断进步&#xff0c;台灯的品质也得到了极大的提高&#xff0c;在生活中很多时候都需要使用台灯&#xff0c;但是市面上的台灯那么多&#xff0c;台灯如何选择 国aa级是对台灯的照度进行的一个很重要的划分&#xff0…

【2023集创赛】安谋科技杯全国一等奖分享:基于安路PH1A60的3D图形体感游戏机

本文为2023年第七届全国大学生集成电路创新创业大赛&#xff08;“集创赛”&#xff09;安谋科技杯全国一等奖作品分享&#xff0c;参加极术社区的【有奖征集】分享你的2023集创赛作品&#xff0c;秀出作品风采&#xff0c;分享2023集创赛作品扩大影响力&#xff0c;更有丰富电…

leetcode 215.数组中第k大的元素

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;数组中第k大的元素 思路&#xff1a; 使用堆数据结构&#xff0c;大堆的堆顶是堆内最大的元素&#xff0c;也就是把当前堆 pop k - 1 次&#xff0c;第 k 次 top 出来的元素就是第 k 大的数。 代码&#xff1a; class …