当前位置: 首页 > 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;股市爆涨爆…...

5步告别Windows卡顿:Win11Debloat系统优化工具让电脑性能提升51%的实战指南

5步告别Windows卡顿&#xff1a;Win11Debloat系统优化工具让电脑性能提升51%的实战指南 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各…...

Debugging torch.distributed.DistBackendError: NCCL Communicator Setup and ncclUniqueId Retrieval Iss

1. 理解NCCL通信错误的核心问题 当你看到torch.distributed.DistBackendError: [2] is setting up NCCL communicator and retrieving ncclUniqueId这个错误时&#xff0c;本质上是在说GPU之间的"对讲机"无法正常建立连接。想象一下你正在组织一场多房间的线上会议&…...

Redis 的核心机制

Redis 作为高性能内存数据库&#xff0c;在现代架构中早已超越了单纯的“缓存”角色&#xff0c;成为了支撑高并发、分布式系统的基石。深入理解其核心场景、持久化机制、内存管理及集群原理&#xff0c;是构建稳定、高效系统的关键。 以下结合具体业务场景&#xff0c;深度解析…...

4个步骤掌握高频交易策略:High-Frequency-Trading-Model-with-IB实战指南

4个步骤掌握高频交易策略&#xff1a;High-Frequency-Trading-Model-with-IB实战指南 【免费下载链接】High-Frequency-Trading-Model-with-IB A high-frequency trading model using Interactive Brokers API with pairs and mean-reversion in Python 项目地址: https://gi…...

OpenClaw硬件监控:nanobot定时报告系统资源使用情况

OpenClaw硬件监控&#xff1a;nanobot定时报告系统资源使用情况 1. 为什么需要自动化硬件监控 去年夏天&#xff0c;我的开发机因为内存泄漏问题突然宕机&#xff0c;导致一个重要的线上演示被迫推迟。当时我就意识到&#xff0c;手动检查系统资源的方式既不及时也不可靠。直…...

【24年最新算法】首发CPO-XGBoost回归+交叉验证 基于冠豪猪优化算法-XGBoost多变量回归预测

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f34e; 往期回顾关注个人主页&#xff1a;Matlab科研工作室&#x1f447; 关注我领取海量matlab电子书和…...

SWF逆向工程行业报告:JPEXS Free Flash Decompiler市场份额2025深度分析

SWF逆向工程行业报告&#xff1a;JPEXS Free Flash Decompiler市场份额2025深度分析 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler 在Flash技术逐渐退出主流但仍有大量历史资产需要维护…...

新手福音:在快马平台零基础上手加速库,轻松提速深度学习训练

新手福音&#xff1a;在快马平台零基础上手加速库&#xff0c;轻松提速深度学习训练 作为一个刚接触深度学习的新手&#xff0c;最头疼的莫过于环境配置和性能优化。最近我在InsCode(快马)平台上发现了一个超实用的功能——预置加速库的深度学习项目模板&#xff0c;让我这个小…...

FPGA信号调试必备:Quartus中keep、preserve、noprune的正确用法与避坑指南

FPGA信号调试必备&#xff1a;Quartus中keep、preserve、noprune的正确用法与避坑指南 在FPGA开发过程中&#xff0c;信号调试是最令人头疼的环节之一。特别是当你发现仿真时明明存在的关键信号&#xff0c;在综合后却神秘消失时&#xff0c;那种挫败感简直难以言表。作为一名长…...

ANPC逆变器下垂控制的“阻抗相消术

ANPC-下垂功率均分-两台ANPC三电平逆变器在不同阻感性线路阻抗下实现有功均分与无功均分&#xff0c;采用积分改进法&#xff08;阻抗相消法&#xff09;&#xff0c;电压电流双闭环控制&#xff0c;中点电位平衡控制&#xff0c;SPWM调制。 1.下垂&#xff0c;电压电流双闭环控…...