【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…

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> …

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

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

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

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

【Python】pandas中的read_excel()和to_excel()函数解析与代码实现

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 &#x1f913; 同时欢迎大家关注其他专栏&#xff0c;我将分享Web前后端开发、人工智能、机器学习、深…

类和对象的学习总结(一)

面向对象和面向过程编程初步认识 C语言是面向过程的&#xff0c;关注过程&#xff08;分析求解问题的步骤&#xff09; 例如&#xff1a;外卖&#xff0c;关注点菜&#xff0c;接单&#xff0c;送单等 C是面向对象的&#xff0c;关注对象&#xff0c;把一件事拆分成不同的对象&…

java之面向对象2笔记

1 接口(interface) 1.1 概述 接口&#xff08;Interface&#xff09;在计算机科学中&#xff0c;特别是在面向对象编程&#xff08;OOP&#xff09;中&#xff0c;是一个重要的概念。它定义了一组方法的规范&#xff0c;但没有实现这些方法的具体代码。接口的主要目的是确保类…

SOA的设计模式_3.微服务模式

SOA的架构中&#xff0c;复杂的ESB企业服务总线依然处于非常重要的位置&#xff0c;整个系统的架构并没有实现完全的组件化以及面向服务&#xff0c;它的学习和使用门槛依然偏高。而微服务不再强调传统SOA架构里面比较重的ESB企业服务总线&#xff0c;同时SOA的思想进入到单个业…

Linux系统下 安装 Nginx

一、下载Nginx安装包 压缩包下载地址&#xff1a;nginx: download 服务器有外网&#xff0c;可直接使用命令下载 wget -c https://nginx.org/download/nginx-1.24.0.tar.gz 二、安装Nginx 1、解压 tar -zxvf nginx-1.24.0.tar.gz 2、安装Nginx所需依赖 yum install -y gc…

SLAM小题目

1、最小二乘题目&#xff1a; 假设有三个WIFI热点&#xff0c;位置分别在(x1,y1), (x2,y2), (x3,y3), 移动端测量到每一个热点的距离L1,L2和L3&#xff0c;要求解移动端的位置. #include <iostream> #include <vector> #include <cmath> class Point { pub…

监听DB配置变更之go-broadcast简单实现

文章目录 1. 前言2. 分析3. 实现4. 问题5. 小结6. 参考 1. 前言 之前遇到一个需求&#xff0c;因为配置的查找是基于db的&#xff0c;而db的更改却无法实时通知到具体利用到这条数据的使用方&#xff0c;为了实现db数据变动时&#xff0c;能够尽快让使用方知道这条数据发生了变…

3、线性代数

1、矩阵转置 A[i,j]A[j,i] 2、对称矩阵 &#xff1a;A转置A [0,2,3] [2 1 5] [3,5,1] 3、三维矩阵 求和 axis0 两个矩阵相加 axis1 两个向量相加 &#xff0c;axis2 向量内部相加 keepdimsTrue 求和后维度保持不变 4、cumsum累加求和 5、torch.mm() 或 torch.bmm() 【矩…