【web本地存储】storage事件,StorageEvent对象介绍

storage事件

Web Storage API 内建了一套事件通知机制,当存储区域的内容发生改变(包括增加、修改、删除数据)时,就会自动触发storage事件,并把它发送给所有感兴趣的监听者,因此,如果需要跟踪存储区域的改变,就需要在关心存储区域内容的页面监听storage事件

StorageEvent对象

storage事件的处理函数接受的event事件对象也和通常的事件对象不同,主要有如下:
在这里插入图片描述

  • key: 设置或删除或修改的键。
  • oldValue: 改变之前的旧值。如果是新增元素,则为null
  • newValue: 改变之后的新值。如果是删除元素,则为null
  • storageArea: 改对象是一个引用,指向发生变化的sessionStorage或localStorage;
  • url: 触发这个改变事件的页面的URL;
  • target: 当前窗口对象

注意点

  1. 只有在数据的内容确实发生改变的时候,才会触发storage事件。如果把一个值设置成一模一样的值,或删除一个根本就不存在的存储项,则不会触发storage事件。
  2. storage事件只会发送给同源、而且处于打开状态的其他页面,而不会发送给触发改变的页面本身及处于关闭状态的页面

和localStorage结合跨标签页数据通信

有两个页面:

页面一

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" width="200"><script>// 同步localStorage数据const input = document.querySelector('input');localStorage.setItem('demo', 'hello');input.addEventListener('blur', function () {console.log('blur -> ', input.value)localStorage.setItem('inputValue', input.value);})</script>
</body>
</html>

页面二

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" width="200"><script>window.addEventListener('storage', (event) => {console.log(event)document.querySelector('input').value = event.newValue})</script>
</body>
</html>

然后,当我们在第一个页面的输入框中输入某个值,例如:今天我真帅
在这里插入图片描述
然后再去看第二个页面
在这里插入图片描述
至此,跨标签页通信大功告成

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

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

相关文章

Flink⼤状态作业调优实践指南:状态报错与启停慢篇

摘要&#xff1a;本文整理自俞航翔、陈婧敏、黄鹏程老师所撰写的大状态作业调优实践指南。由于内容丰富&#xff0c;本文分享终篇状态报错与启停慢篇&#xff0c;主要分为以下四个部分&#xff1a; 检查点和快照超时的诊断与调优 作业快速启动和扩缩容方案 总结 阿里云企业级…

creo学习一

设置好当前配置后&#xff0c;导出config配置文件&#xff0c;并覆盖掉此路径下的旧文件&#xff0c;使得新配置永久生效&#xff0c;这样每次打开软件都是新配置的设置&#xff1a; 系统颜色的导出&#xff1a; 打开版本的问题&#xff1a; 不能有弱尺寸&#xff1a; 注意&a…

分享一个 .NET Core Console 项目中应用 NLog 写日志的详细例子

前言 日志在软件开发中扮演着非常重要的角色&#xff0c;通常我们用它来记录应用程序运行时发生的事件、错误信息、警告以及其他相关信息&#xff0c;帮助在调试和排查问题时更快速地定位和解决 Bug。 通过日志&#xff0c;我们可以做到&#xff1a; 故障排除和调试&#xff…

【经验总结】ECU休眠后通过一帧NM报文唤醒ECU后在要求时间内通过第二帧NM报文需要唤醒网络

目录 前言 环境 1.需求描述 2.测试方法 3.完成需求的方法 4.原理详解 4.1 CanTrcv 接收到第一帧NM报文 4.2 EcuM接收到唤醒事件 4.3 CanTcv接收到第二帧NM报文 4.4 EcuM完成唤醒源校验 5. 总结 前言 关于CAN收发器参与下的ECU休眠唤醒问题我们已经写过很多文章,&l…

【C#/C++】C++定义一个返回uchar*的函数,调用函数时接收的数据异常

C定义一个返回uchar*的函数&#xff0c;调用函数时接收的数据异常 1、场景2、错误代码3.正确写法 1、场景 我是想实现一个图像畸变矫正的函数&#xff0c;由于相机的硬件原因&#xff08;相机内外参数&#xff0c;视野&#xff09;会导致我们取到的图有一定程度的畸变&#xff…

Reinforcement Learning学习(三)

前言 最近在学习Mujoco环境,学习了一些官方的Tutorials以及开源的Demo,对SB3库的强化学习标准库有了一定的了解,尝试搭建了自己的环境,基于UR5E机械臂,进行了一个避障的任务,同时尝试接入了图像大模型API,做了一些有趣的应用,参考资料如下: https://mujoco.readthedo…

MySQL普通表转换为分区表实战指南

码到三十五 &#xff1a; 个人主页 引言 本文将详细指导新手开发者如何将MySQL中的普通表转换为分区表。分区表在处理庞大数据集时展现出显著的性能优势&#xff0c;不仅能大幅提升查询速度&#xff0c;还能有效简化数据维护工作。通过掌握这一技巧能够更好地应对数据密集型应…

《编程小白变大神:DjangoBlog带你飞越代码海洋》

还在为你的博客加载速度慢而烦恼&#xff1f;DjangoBlog性能优化大揭秘&#xff0c;让你的网站速度飞跃提升&#xff01;本文将带你深入了解缓存策略、数据库优化、静态文件处理等关键技术&#xff0c;更有Gunicorn和Nginx的黄金搭档&#xff0c;让你的博客部署如虎添翼。无论你…

解决阿里云的端口添加安全组仍然无法扫描到

发现用线上的网站扫不到这个端口&#xff0c;这个端口关了&#xff0c;但是没有更详细信息了 我用nmap扫了一下我的这个端口&#xff0c;发现主机是活跃的&#xff0c;但是有防火墙&#xff0c;我们列出云服务器上面的这个防火墙list&#xff0c;发现确实没有5566端口 参考&a…

大数据解决方案案例:电商平台日志分析

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

AI作画工具介绍

目录 1.概述 2.Stable Diffusion 2.1.诞生背景 2.2.版本历史 2.3.优点 2.4.缺点 2.5.应用场景 2.6.未来展望 3.Midjourney 3.1.诞生背景 3.2.版本历史 3.3.优点 3.4.缺点 3.5.应用场景 3.6.未来展望 4.总结 1.概述 AI作画工具是一种运用人工智能技术&#xff…

万向节锁死(Gimbal Lock)

Gimbal Lock是一个常见的3D动画问题,主要由旋转顺序引起的。我来详细解释一下它的成因: 在三维空间中,任何旋转都可以分解为绕X,Y,Z三个轴的欧拉旋转(Euler Rotation)。每个轴的旋转是按照一定顺序进行的,比如XYZ或ZYX等。 理论上,通过这三个旋转值的组合,可以达到任意的空间…

require.context()函数介绍

业务需求&#xff1a; 前端Vue项目怎样读取src/assets目录下所有jpg文件 require.context()方法来读取src/assets目录下的所有.jpg文件 <template><div><img v-for"image in images" :src"image" :key"image" /></div> …

代码随想录打卡第一天(补)

数组理论基础&#xff0c;704. 二分查找&#xff0c;27. 移除元素 704. 二分查找 最简单的二分思想的应用&#xff0c;主要锻炼写两种方法 两种方法的区别就是&#xff1a;右指针的每次变化&#xff0c;可能还有就是最后找到目标值后的一个下标到底是什么 二分思想&#xff1…

Python实现Stack

你好&#xff0c;我是悦创。 Python 中的栈结构是一种后进先出&#xff08;LIFO, Last In, First Out&#xff09;的数据结构&#xff0c;这意味着最后添加到栈中的元素将是第一个被移除的。栈通常用于解决涉及到反转、历史记录和撤销操作等问题。在 Python 中&#xff0c;你可…

九、C语言:隐式类型转换(整型提升与算数转换)

一、隐式类型转换 C的整型算术运算总是至少以缺省整型类型的精度来进行的。为了获得这个精度&#xff0c;表达式中的字符和短整型操作数在使用之前被转换为普通整型&#xff0c;这种转换称为整型提升。 二、整型提升 //1.表达式的整型运算要在CPU的相应运算器件内执行&#xff…

I/O 设备与设备控制器

目录 I/O 设备 1. 键盘和鼠标 2. 显示器 3. 磁盘 4. 打印机 5. 网络适配器 设备控制器 1. 数据传输 2. 缓冲管理 3. 中断处理 4. 设备初始化 5. 错误检测与恢复 6. 设备控制器的组成部分 7. 示例图解 内存映像 I/O 原理 优点 实现方式 应用场景 I/O 通道 I…

Nginx 精解:正则表达式、location 匹配与 rewrite 重写

一、常见的 Nginx 正则表达式 在 Nginx 配置中&#xff0c;正则表达式用于匹配和重写 URL 请求。以下是一些常见的 Nginx 正则表达式示例&#xff1a; 当涉及正则表达式时&#xff0c;理解各个特殊字符的含义是非常重要的。以下是每个特殊字符的例子&#xff1a; ^&#xff1…

langchainJS -结构化输出(StructuredOutputParser )

在LangChain的帮助下&#xff0c;我们可以为输出定义模式。StructuredOutputParser 使用定义的名称和描述来分析和构建模型预测的输出。 const productParser StructuredOutputParser.fromNamesAndDescriptions({Name: "Name of The Product",Description: "De…

JS中split的用法

在JavaScript中&#xff0c;split() 方法用于将字符串分割成字符串数组&#xff0c;并返回这个数组。该方法接受一个参数&#xff0c;该参数定义了用于分割字符串的字符或正则表达式。 以下是一些使用 split() 方法的示例&#xff1a; 示例 1&#xff1a;使用字符串作为分隔符…