监听localStorage的变化

最新推荐文章于 2024-03-27 11:02:43 发布
最新推荐文章于 2024-03-27 11:02:43 发布
阅读量1.1k 收藏
点赞数
分类专栏： javascript vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52636663/article/details/123087762
版权 
window.addEventListener("storage", function(e){

                console.log(e.key);

                if(e.key == "reportId" && e.newValue){

                 

                }

            })

乐悠刘99
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-localstorage-hook
03-26
Díasatrásleshabíacompartidocómorealizar un custom hook para react（ ），pero en eldíahoy，les comparto la forma de utilizar el mismo para poderguardar datos en el localstorage，埃斯佩罗雀巢阵风 ...
详解Vue监听数据变化原理
12-01
本人最近在学习Vue，从网上查询了很多关于Vue监听数据变化原理，稍微整理精简一下做下分享。 浅度监听 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
【组件封装】监听localStorage的变化
接着奏乐接着舞的博客
09-08 3501
由于在平时开发中，经常或不经常的用到一些功能或插件或函数，回头找起来还挺麻烦，我的想法是我直接将他们全部的封装成一个个的组件，做到“”拿来即用“”且该组件必须经过测试确实可用才行，于是我新创建了一个vue项目，基于"vue": "^2.6.14"，用它来测试组件是否正常，因为我vue2/3 ,react hooks 之类的都在用，这里就以vue2作为基础了，后续我的想法是多做几个版本。
localStorage的用法和监听 localStorage值的变化
DTCloud
04-19 1049
当传入一个 key 时，removeItem() 方法会从 localStorage 中删除指定的数据。key() 方法一般用于遍历 localStorage 中所有的数据时，传入一个以 0 开始计数的数字，它会返回对应的 key 的名字。调用此方法后，会清空当前域名下所有存储在 localStorage 中的数据。调用时不需要传入任何参数。getItem() 方法可以用来访问已存储在浏览器 localStorage 中的数据。从它的名字可以得知，此方法可以用来存储数据到 localStorage 中。
vue3实时监听LocalStorage的变化
最新发布
青莳的博客
03-27 948
【代码】vue实时监听LocalStorage的变化。
vue中如何监听localStorage中值的变化
du_aitiantian的博客
06-30 4276
在日常开发中，我们经常使用localStorage来存储一些变量。这些变量会存储在浏览中。对于localStorage来说，即使关闭浏览器，这些变量依然存储着，方便我们开发的时候在别的地方使用。
vue——不同组件中监听Localstorage变化并实时更新
Erya Programming learning
05-06 4898
期望效果： tip：access=1表示超级管理员，access=0表示管理员。 希望内容框（一个组件）和顶栏（另一个组件）的管理员权限和localstorage中保持一致。 内容框和顶栏属于组件间传值，如果需要同步状态可以用到vuex，但此时可以利用localstorage自身的方法来实现localstorage值的监听。 准备 首先要了解localStorage的使用，因为此处要监听不要使用localStorage.xxx='xxx'的方式来给key赋值！！！ localStorage.getItem
详解vuex结合localstorage动态监听storage的变化
08-27
主要介绍了详解vuex结合localstorage动态监听storage的变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue watch监听对象及对应值的变化详解
11-26
如下所示： var vm=new Vue({ data:{ ... b:{//深度监听，可监听到对象、数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:tru
React Hook 监听localStorage更新
无缺的博客
11-23 7263
场景：数据存储在了localStorage里，localStorage变化实时更新组件里使用到的数据 误区： 一开始条件下想到的是按照useEffect监听useState变化那一套 useEffect(()=>{ useData(localStorage.getItem('rightCartData')) },[localStorage.getItem('rightCartData')]) 很明显不行，为什么？ 示例不起作用的原因是和传递给 useEff
跨页面通信、如何监听 LocalStorage 的变化【storage 事件】
Xpy 的博客
04-02 4022
场景：当涉及到同时打开多个tab页，操作一个tab，希望其他的tab也会同时进行更新状态。 原理就是前度的跨页面通信 一、当 LocalStorage 变化时，会触发storage事件。 在需要改变的页面增加时间监听： window.addEventListener('storage', function (e) { if (e.key === 'ctc-msg') { const data = JSON.parse(e.newValue); const text =
监听localStorage变化（当页面）
热门推荐
heerey525
10-22 1万+
今天用到了监听localStorage，然后搜索了一些文章博客，我最后总结一下，可以直接拿来用 1、网上很多写到的都是说同域不同页面下的运用，这个太多了，我就不写了，简单，我没有用到暂时。 2、我刚好优化项目想到本地存储localStorage，然后同页面监听，重写localStorage的方法，抛出自定义事件： <!doctype html> <html lang="e...
监听localStorage
qq_42560402的博客
12-18 417
【代码】监听localStorage。
监听localStorage变化（同页面监听）
qq_31965515的博客
11-26 5218
“当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发”  同页面监听，重写localStorage的方法，抛出自定义事件： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name
vue监听localStorage变化
weixin_54757930的博客
01-07 1193
//main.js var orignalSetItem = localStorage.setItem; localStorage.setItem = function(key,newValue){ // 要监听的key为approveCount if(key === "approveCount"){ var setItemEvent = new Event("setItemEvent"); setItemEvent.newValue = newValue; window.dispat
监听localStorage变化
weixin_46845202的博客
01-06 835
<script> var orignalSetItem = localStorage.setItem; localStorage.setItem = function (key, newValue) { var setItemEvent = new Event("setItemEvent"); setItemEvent.key = key; setItemEvent.newValue ...
本地存储webstorage-如何监测本地数据是否改变
前端技术分享
09-11 2299
在H5中，window对象里面有一个storage事件，我们可以进行监听或者指定其事件处理函数的方法，在其他页面修改了sessionstorage或者localstorage中的值时，要做的处理。 我们先看一下一下几个属性： 1、event.key:这个是 被修改的数据键值 2、event.oldValue :  被修改前的值 3、enent.newValue:被修改后的值 4、even
vue中监听localStorage的变化
正一品程序员的博客
11-25 2296
在根目录下创建一个名为utils的文件夹,在文件夹中创建一个updateLocalStorage.js文件 //updateLocalStorage.js // 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件 function dispatchEventStroage() { const signSetItem = localStorage.setItem localStorage.setItem = function(key, v
mobx 如何监听 localStorage 变化
05-21
要监听 localStorage 变化，可以使用`window.addEventListener('storage', callback)`方法。这个方法会在 localStorage 中发生变化时触发回调函数。 在 MobX 中，可以使用`autorun`函数来监听 localStorage 的变化。`autorun`函数会自动追踪被观察的数据，并在它们发生变化时执行回调函数。 以下是一个使用 MobX 监听 localStorage 的例子： ```javascript import { autorun } from 'mobx'; // 定义一个 observable 对象 const storage = { value: localStorage.getItem('value') || '', setValue(newValue) { this.value = newValue; localStorage.setItem('value', newValue); }, }; // 使用 autorun 监听 storage.value 的变化 autorun(() => { console.log(`localStorage 中的 value 发生变化：${storage.value}`); }); // 修改 localStorage 中的 value storage.setValue('new value'); ``` 在这个例子中，我们先定义了一个 observable 对象 `storage`，它有一个属性 `value` 表示 localStorage 中的值。`setValue` 方法用于修改 `value` 值，并将修改后的值存储到 localStorage 中。 然后我们使用 `autorun` 函数来监听 `storage.value` 的变化。当 `storage.value` 发生变化时，`autorun` 函数会自动执行回调函数，输出变化后的值。 最后我们调用 `storage.setValue('new value')` 修改了 localStorage 中的 value 值，这时 `autorun` 函数会自动执行回调函数，输出新的值。 注意：`autorun` 函数会在组件挂载时自动执行一次回调函数，因此在上面的例子中，在控制台中会先输出 localStorage 中的 value 值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值