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

这篇具有很好参考价值的文章主要介绍了如何使用Web Storage对页面中数据进行监听?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

如何使用Web Storage对页面中数据进行监听?,前端,javascript,开发语言

需要注意的是,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)保存代码,在浏览器中进行测试,效果如图所示。

如何使用Web Storage对页面中数据进行监听?,前端,javascript,开发语言

初始页面效果

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

如何使用Web Storage对页面中数据进行监听?,前端,javascript,开发语言

设置数据

(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所示。

如何使用Web Storage对页面中数据进行监听?,前端,javascript,开发语言

页面初始效果

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

如何使用Web Storage对页面中数据进行监听?,前端,javascript,开发语言

修改后与修改前的用户名

从图2-11可以看出,页面显示新的用户名为“user2”,旧的用户名为“userl”。由此可知,通过storage事件可以监听 localStorage数据发生的变化。文章来源地址https://www.toymoban.com/news/detail-703618.html

到了这里,关于如何使用Web Storage对页面中数据进行监听?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp的小程序中使用web-view进行相互传参,并监听web-view的返回键

    H5页面中 1.引入微信js https://res.wx.qq.com/open/js/jweixin-1.4.0.js 2.引入 uniapp 的jdk文件(去官网下到本地)( 引入一定要放到body下面,不然UniAppJSBridgeReady不生效 ) 3.写好UniAppJSBridgeReady vue页面中接收值 在vue的h5页面中 在uniapp页面中通过@message拿值 原因:官方说小程序使用web-view是

    2024年02月08日
    浏览(51)
  • 如何使用Vue实现Excel表格数据的导入,在前端实现Excel表格文件的上传和解析,并使用Table组件将解析出来的数据展示在前端页面上

    随着互联网的发展和社会的进步,各个行业的数据量越来越大,对于数据的处理变得越来越重要。其中,Excel表格是一种重要的数据处理工具。在前后端项目中,实现Excel表格的导入和导出功能也愈加常见。这篇文章将介绍如何使用Vue实现Excel表格数据的导入。 在开始介绍实现

    2024年02月11日
    浏览(63)
  • 基础前端使用web3 进行区块链项目开发

    这篇文章不会些区块链的机制算法等一切,只是对前端开发者,如何快速上手进行区块链项目开发做一个简单的引导。 阅读本文之前,需要了解一些简单的区块链知识,能回答以下四个问题就可以阅读本文了。 1、区块链是什么? 2、区块链节点是什么? 3、钱包是什么? 4、

    2024年02月01日
    浏览(53)
  • 数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属的专栏: 数据分析系统化教学,零基础到进阶实战 景天的主页: 景天科技苑 Streamlit是一个免费的开源框架,用于快速构建和共享漂亮的数据科学Web应用程序。它是一个基于Python的库,专为机器学

    2024年03月14日
    浏览(46)
  • web开发中,简单的案例说明前端页面和后端以及mysql数据库的交互过程

            首先这是一个基于 web开发 的稿子,作者也是转java20天左右,以前也一直迷惑起那段页面是如何和后端进行交互,数据提交提交到了哪里?后端开发如何获取到前端提交的数据呢?后端数据提交到数据库中应该如何处理,接下来通过一个简单的例子,登录案例 (实

    2024年02月03日
    浏览(52)
  • 小程序web-view,h5页监听返回到小程序指定页面

    在h5页面进行监听返回跳转判断: created(){ this.pushHistory(); window.addEventListener(\\\"popstate\\\", function(e) { //首页点击返回,直接关闭网页 WeixinJSBridge.call(\\\'closeWindow\\\'); uni.reLaunch({ url: `xxxx`, }); }, false); }, methods:{ pushHistory() { var state = { title: \\\"title\\\", url: \\\"#\\\" }; window.history.pushState(state, state.title,

    2024年02月11日
    浏览(60)
  • 小程序如何监听页面的滚动事件

    在小程序开发中,监听页面的滚动事件是一个常见的需求。通过监听页面的滚动事件,我们可以实现一些特殊效果,例如懒加载、下拉刷新等。本文将介绍如何在小程序中监听页面的滚动事件,并给出一些实用的示例代码。 引言 随着小程序的普及和发展,越来越多的开发者

    2024年02月08日
    浏览(60)
  • 新版Selenium使用Python对web页面多个相同Class Name属性的元素进行选择&新老版本对比

    在使用新版的Selenium对网页代码中存在相同class name属性的元素进行定位,在定位的过程中发现使用先前的定位方法已经无法成功对所要操作组件进行定位,这是什么问题呢?下面为大家进行解答。 大概为了统一编写格式,方便阅读理解,新版本的Selenium出来后,摒弃了旧版的

    2024年02月04日
    浏览(48)
  • 远程服务和web服务和前端,三方通过socket和websocket进行双向通信传输数据

    1. 什么是socket? 在计算机通信领域,socket 被翻译为“套接字”,它是计算机之间进行通信的一种约定或一种方式。通过 socket 这种约定,一台计算机可以接收其他计算机的数据,也可以向其他计算机发送数据。 2. 什么是websocket? WebSocket是一种网络通信协议,是HTML5新增的特性,

    2024年02月15日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包