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

同标签实现监听LocalStorage

使用 React 生命周期函数 useEffect来监听和处理 LocalStorage 的变化 

import React, { useEffect } from 'react';const LocalStorageListener = () => {useEffect(() => {// 注册监听器const handleStorageChange = (event) => {if (event.key === 'myKey') {console.log('注册监听器', event.newValue);}};// 添加监听器window.addEventListener('storage', handleStorageChange);// 触发监听器const triggerCustomStorageEvent = () => {const storageEvent = new StorageEvent('storage', {key: 'myKey',newValue: 'newValue',url: window.location.href,});window.dispatchEvent(storageEvent);};// 移除监听器return () => {window.removeEventListener('storage', handleStorageChange);};}, []); // 空数组表示在组件挂载时运行return (<div><button onClick={() => localStorage.setItem('myKey', 'newValue')}>修改 localStorage</button><button onClick={() => window.dispatchEvent(new StorageEvent('storage', {key: 'myKey',newValue: localStorage.getItem('myKey'),url: window.location.href,}))}>手动触发 StorageEvent</button></div>);
};export default LocalStorageListener;

使用Vue生命周期钩子 onMounted 和 onUnmounted来监听和处理 LocalStorage 的变化 

<template><div><button @click="updateLocalStorage">修改 localStorage</button><button @click="triggerCustomStorageEvent">手动触发 StorageEvent</button></div>
</template><script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue';
// 注册监听器
const handleStorageChange = (event: StorageEvent) => {if (event.key === 'myKey') {console.log('Detected localStorage change:', event.newValue);}
};const updateLocalStorage = () => {localStorage.setItem('myKey', 'newValue');
};
// 触发监听器
const triggerCustomStorageEvent = () => {const storageEvent = new StorageEvent('storage', {key: 'myKey',newValue: 'newValue',url: window.location.href,});window.dispatchEvent(storageEvent);
};
// 添加监听器
onMounted(() => {window.addEventListener('storage', handleStorageChange);
});
// 移出监听器
onUnmounted(() => {window.removeEventListener('storage', handleStorageChange);
});
</script>

相关文章:

同标签实现监听LocalStorage

使用 React 生命周期函数 useEffect来监听和处理 LocalStorage 的变化 import React, { useEffect } from react;const LocalStorageListener () > {useEffect(() > {// 注册监听器const handleStorageChange (event) > {if (event.key myKey) {console.log(注册…...

JAVA高性能缓存项目

版本一 代码实现 import java.util.HashMap; import java.util.concurrent.TimeUnit;public class CacheExample01 {private final static HashMap<String, Integer> cache new HashMap<>();public static Integer check(String userId) throws InterruptedExce…...

智慧农业大数据平台:智汇田园,数驭未来

智慧农业大数据平台 计讯物联智慧农业大数据平台是一个集管理数字化、作业自动化、生产智能化、产品绿色化、环境信息化、服务现代化于一体的多功能监管系统。它通过与硬件产品的搭配使用&#xff0c;实现对农业生产全过程的实时监测、精准控制和科学管理。该平台集成了多个数…...

Go语言基础教程:可变参数函数

Go 语言允许函数接收可变数量的参数&#xff0c;这种特性对于处理数量不确定的参数特别有用。在本教程中&#xff0c;我们将通过示例代码讲解如何定义和使用 Go 的可变参数函数。 package mainimport "fmt"// 定义一个可变参数函数 sum&#xff0c;接收任意数量的整…...

高并发场景下解决并发数据不一致

简单的场景: 全量数据更新的情况下, 不在乎同一秒的请求都必须要成功, 只留下最新的更新请求数据 方案常用的是 1、数据库增加时间戳标识实现的乐观锁, 请求参数从源头带上微秒或者毫秒时间戳数据库存储, 然后在更新SQL语句上比较 (数据库的时间 < 参数传递的时间) 例如: A…...

OpenAI GPT-o1实现方案记录与梳理

本篇文章用于记录从各处收集到的o1复现方案的推测以及介绍 目录 Journey Learning - 上海交通大学NYUMBZUAIGAIRCore IdeaKey QuestionsKey TechnologiesTrainingInference A Tutorial on LLM Reasoning: Relevant methods behind ChatGPT o1 - UCL汪军教授Core Idea先导自回归…...

Excel:vba实现生成随机数

Sub 生成随机数字()Dim randomNumber As IntegerDim minValue As IntegerDim maxValue As Integer 设置随机数的范围(假入班级里面有43个学生&#xff0c;学号是从1→43)minValue 1maxValue 43 生成随机数(在1到43之间生成随机数)randomNumber Application.WorksheetFunctio…...

Python | Leetcode Python题解之第506题相对名次

题目&#xff1a; 题解&#xff1a; class Solution:desc ("Gold Medal", "Silver Medal", "Bronze Medal")def findRelativeRanks(self, score: List[int]) -> List[str]:ans [""] * len(score)arr sorted(enumerate(score), …...

安全见闻(6)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;安全见闻&#xff08;6&#xff09;_哔哩哔哩_bilibili 学无止境&#xff0c;开拓自己的眼界才能走的更远 本文主要讲解通讯协议涉及的安全问题。…...

Promise、async、await 、异步生成器的错误处理方案

1、Promise.all 的错误处理 Promise.all 方法接受一个 Promise 数组&#xff0c;并返回所有解析 Promise 的结果数组&#xff1a; const promise1 Promise.resolve("one"); const promise2 Promise.resolve("two");Promise.all([promise1, promise2]).…...

腾讯云:数智教育专场-学习笔记

15点13分2024年10月21日&#xff08;短短5天的时间&#xff0c;自己的成长速度更加惊人&#xff09;-开始进行“降本增效”学习模式&#xff0c;根据小米手环对于自己的行为模式分析&#xff08;不断地寻找数据之间的关联性&#xff09;&#xff0c;每天高效记忆时间&#xff0…...

Ovis: 多模态大语言模型的结构化嵌入对齐

论文题目&#xff1a;Ovis: Structural Embedding Alignment for Multimodal Large Language Model 论文地址&#xff1a;https://arxiv.org/pdf/2405.20797 github地址&#xff1a;https://github.com/AIDC-AI/Ovis/?tabreadme-ov-file 今天&#xff0c;我将分享一项重要的研…...

python的Django的render_to_string函数和render函数模板的使用

一、render_to_string render_to_string 是 Django 框架中的一个便捷函数&#xff0c;用于将模板渲染为字符串。 render_to_string(template_name.html, context, requestNone, usingNone) template_name.html&#xff1a;要渲染的模板文件的名称。context&#xff1a;传递给…...

基于Python大数据的王者荣耀战队数据分析及可视化系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…...

【Linux学习】(3)Linux的基本指令操作

前言 配置Xshell登录远程服务器Linux的基本指令——man、cp、mv、alias&which、cat&more&less、head&tail、date、cal、find、grep、zip&tar、bc、unameLinux常用热键 一、配置Xshell登录远程服务器 以前我们登录使用指令&#xff1a; ssh 用户名你的公网…...

Mac 使用脚本批量导入 Apple 歌曲

最近呢&#xff0c;买了一个 iPad&#xff0c;虽然家里笔记本台式都有&#xff0c;显示器都是 2个&#xff0c;比较方便看代码&#xff08;边打游戏边追剧&#xff09;。 但是在床上拿笔记本始终还是不方便&#xff0c;手机在家看还是小了点&#xff0c;自从有 iPad 之后&…...

全桥PFC电路及MATLAB仿真

一、PFC电路原理概述 PFC全称“Power Factor Correction”&#xff08;功率因数校正&#xff09;&#xff0c;PFC电路即能对功率因数进行校正&#xff0c;或者说是能提高功率因数的电路。是开关电源中很常见的电路。功率因数是用来描述电力系统中有功功率&#xff08;实际使用…...

【安当产品应用案例100集】025-确保数据安全传输——基于KMS与HSM的定期分发加密解决方案

引言&#xff1a; 在当今快速发展的数字化时代&#xff0c;企业面临着前所未有的信息安全挑战。尤其是在需要向供应商定期分发敏感数据的情况下&#xff0c;如何保证这些数据在传输过程中的安全性变得至关重要。为此&#xff0c;我们推出了结合安当KMS密钥管理平台与HSM密码机…...

十 缺陷检测解决策略之三:频域+空域

十 缺陷检测解决策略之三:频域空域 read_image (Image, 矩形) * 中间低频&#xff0c;四周高频 fft_image (Image, ImageFFT) * 中间低频&#xff0c;四周高频 fft_generic (Image, ImageFFT1, to_freq, -1, sqrt, dc_center, complex) * 中间高频&#xff0c;四周低频 rft_ge…...

有望第一次走出慢牛

A股已走完30多年历程。 大约每十年&#xff0c;会经历一轮牛熊周期。特点是每一轮周期&#xff0c;大约九成的时间都是熊市主导。就是我们常说的 快牛慢熊。 这一次&#xff0c;会不会重复历史? 历史不会简单重复。已经感受到了盘面的变化。 有人说&#xff0c;股市爆涨爆…...

计算机网络(十二) —— 高级IO

#1024程序员节 | 征文# 目录 一&#xff0c;预备 1.1 重新理解IO 1.2 五种IO模型 1.3 非阻塞IO 二&#xff0c;select 2.1 关于select 2.2 select接口参数解释 2.3 timeval结构体和fd_set类型 2.4 socket就绪条件 2.5 select基本工作流程 2.6 简单select的服务器代…...

电力行业 | 等保测评(网络安全等级保护)工作全解

电力行业为什么要做网络安全等级保护&#xff1f; 电力行业是关系到国家安全和社会稳定的基础性行业&#xff0c;电力行业信息化程度相对较高&#xff0c;是首批国家信息安全等级保护的重点行业。 01 国家法律法规的要求 1994《计算机信息系统安全保护条例》&#xff08;国务…...

总裁主题CeoMax-Pro主题7.6开心版

激活方式&#xff1a; 1.授权接口源码ceotheme-auth-api.zip搭建一个站点&#xff0c;绑定www.ceotheme.com域名&#xff0c;并配置任意一个域名的 SSL 证书。 2.在 hosts 中添加&#xff1a;127.0.0.1 www.ceotheme.com 3.上传class-wp-http.php到wp-includes目录&#xff…...

深入探讨编程的核心概念、学习路径、实际应用以及对未来的影响

在当今这个数字化时代&#xff0c;编程已成为连接现实与虚拟世界的桥梁&#xff0c;它不仅塑造了我们的生活方式&#xff0c;还推动了科技的飞速发展。从简单的网页制作到复杂的人工智能系统&#xff0c;编程无处不在&#xff0c;其重要性不言而喻。本文旨在深入探讨编程的核心…...

IDEA如何将一个分支的代码合并到另一个分支(当前分支)

前言 我们在使用IDEA开发Java应用时&#xff0c;经常是和git一起使用的。我们对于git常用的操作包括提交&#xff0c;推送&#xff0c;拉取代码等。还有一个重要的功能是合并代码。 那么&#xff0c;我们应该如何合并代码呢&#xff1f; 如何合并代码 首先&#xff0c;我们…...

Python实现基于WebSocket的stomp协议调试助手工具

stomp协议很简单&#xff0c;但是搜遍网络竟没找到一款合适的客户端工具。大多数提供的都是客户端库的使用。可能是太简单了吧&#xff01;可是即便这样&#xff0c;假如有一可视化的工具&#xff0c;将方便的对stomp协议进行抓包调试。网上类似MQTT的客户端工具有很多&#xf…...

基于neo4j的旅游知识图谱维护与问答系统

你还在为毕业设计发愁吗&#xff1f;试试这个基于Neo4j的旅游知识图谱维护与问答系统吧&#xff01;这套系统不仅功能强大&#xff0c;而且几乎涵盖了你需要的一切&#xff0c;完美助力你的毕业项目&#xff01; 系统介绍 该系统是专门针对旅游景点信息的知识图谱工具&#x…...

竞赛学习路线推荐(编程基础)

关于学习路线的推荐&#xff0c;总体上&#xff0c;分两步学习&#xff0c;第一步学习编程语言&#xff08;C、C、java&#xff09;&#xff0c;第二步是学习数据结构和算法 不少初学者会选择C语言或C作为首选&#xff0c;笔者这里也推荐C或C作为入门&#xff0c;需要注意的是&…...

webRTC搭建:STUN 和 TURN 服务器 链接google的有点慢,是不是可以自己搭建

如果使用 Google 提供的 STUN/TURN 服务器速度较慢&#xff0c;你完全可以自己搭建 STUN 和 TURN 服务器。这有助于提升网络连接速度和稳定性&#xff0c;特别是在需要穿透 NAT 或防火墙的网络环境下。 下面是如何自己搭建 STUN 和 TURN 服务器的具体步骤&#xff1a; 1. 选择…...

利用Pix4D和ArcGIS计算植被盖度

除了水文分析和沟道形态分析之外&#xff0c;在实际工作中还要计算植被盖度&#xff01; 植被盖度&#xff0c;也称为植被覆盖率或植物覆盖度&#xff0c;是指某一地表面积上植物冠层垂直投影面积占该地表面积的比例。它通常以百分比的形式表示&#xff0c;是描述地表植被状况的…...

海洋公司做网站推广/百度竞价排名算法

Java 中 “” 是判断指针是否一样&#xff1b;Object 中 “equals”默认就是 “”&#xff1b;String 类中重写了 “equals”方法。public class Employee {. . .public boolean equals(Object otherObject) {// a quick test to see if the objects are identicalif (this …...

政府大型网站建设/百度客服转人工

&#xfeff;&#xfeff;Lex自动地表示把输入串词法结构的正规式及相应的动作转换成一个宿主语言的程序&#xff0c;即词法分析程序&#xff0c;它有一个固定的名字yyler&#xff0c;在这里yyler是一个C语言的程序。Yylex将识别出输入串中的词形&#xff0c;并且在识别出某词形…...

与有权重网站做友链/淘数据官网

表示程序性能 CPE&#xff1a; Cycles Per Element&#xff0c;每元素的周期数&#xff0c;作为表示程序性能的表示方法 处理器活动的顺序由时钟控制&#xff0c;其提供某个频率的规律信号&#xff0c;数量级为GHz 使用时钟周期表示&#xff0c;度量值表示的是执行了多少条指…...

做页面设计的网站/宁波seo推广推荐

"将一个类的接口转换成客户希望的另一个接口,Adapter模式使原本由于接口不兼容而不能一起工作的类可以一起工作" 。简单的说,就是利用现有的接口去包装一个第三方的接口, 使其能象现有接口一样被程序调用,而不考虑实际使用类的差异 意图将一个类的接口转换成客户希望…...

做标签网站/理发培训专业学校

docker images|grep none|awk {print $3}|xargs docker rmi 转载于:https://www.cnblogs.com/jiuchongxiao/p/9597069.html...

企业年金怎么提取/东莞seo网站排名优化公司

java使double类型保留两位小数的方法本文是百分网小编整理的主要介绍关于java使double类型保留两位小数的方法&#xff0c;有需要的朋友们一起看看吧!想了解更多相关信息请持续关注我们应届毕业生考试网!代码如下:mport java.text.DecimalFormat;DecimalFormat df new De…...