监听localStorage变化（同页面监听）

最新推荐文章于 2024-05-28 17:46:17 发布
最新推荐文章于 2024-05-28 17:46:17 发布
阅读量5.2k 收藏 7
点赞数
分类专栏： web前端 文章标签： 监听localStorage变化（同页面监听）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31965515/article/details/84553709
版权

“当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发” 

同页面监听，重写localStorage的方法，抛出自定义事件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>监听localStorage变化（同页面）</title>
</head>
<body>
<button class="add">add</button>
<button class="del">del</button>
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
<script>
    var orignalSetItem = localStorage.setItem;
    localStorage.setItem = function(key,newValue){
        var setItemEvent = new Event("setItemEvent");
        setItemEvent.key = key;
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this,arguments);
    };
    window.addEventListener("setItemEvent", function (e) {
        if(e.key=='demo'){
            alert('key值为demo，添加成功');
        }
    });
    $('.add').click(function () {
        localStorage.setItem("demo","123");
    })
 
 
 
    var orignalremoveItem = localStorage.removeItem;
    localStorage.removeItem = function(key,newValue){
        var removeItemEvent = new Event("removeItemEvent");
        removeItemEvent.key = key;
        window.dispatchEvent(removeItemEvent);
        orignalremoveItem.apply(this,arguments);
    };
    window.addEventListener("removeItemEvent", function (e) {
        if(localStorage.getItem("demo")){
            if(e.key=='demo'){
                alert("key值为demo，删除成功");
            }
        }else{
            alert("本地数据无key值为demo")
        }
    });
    $(".del").click(function () {
        localStorage.removeItem('demo')
    })
</script>
</body>
</html>

 

哎呦喂1111
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js 同源页面间通信 storage 和跨域页面间通信 postMessage
haogemr的博客
09-08 3700
同源页面间通信，storage事件监听介绍使用扩展跨域页面间通信 postMessage介绍使用安卓平台差异化处理安全问题 同源页面间通信，storage事件监听 参考博客：h5 storage事件监听 介绍 当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发，所以满足触发监听的条件有三个： 同一浏览器打开了两个同源页面 其中一个网页修改了localStorage 另一网页注册了storage事件 注意：在同一个网页修改本地存储，又在同一个网页监听，.
localStorage监听
weixin_51058957的博客
01-17 270
两个页面一起打开 由第一个页面控制两个页面状态 一起跳转到目标页面 第二个页面监听第一个页面。console.log('我监听到了');history.push('目标路径')history.push('目标路径')
【Vue】跨页面监听 localstorage 的值变化
最新发布
weixin_45968070的博客
05-28 298
此文档为个人归纳笔记，非原创。
vue监听localstorage值变化
热门推荐
xiaoenwu的博客
09-06 1万+
在vue中实现监听localstorage中某个键对应的值的变化 在根目录下创建一个名为utils的文件夹,在文件夹中创建一个tool.js文件 //****将这段内容放在tool.js文件中**** // 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件 function dispatchEventStroage() { const signSetItem = localStorage.setItem localStorage.se
js监听localStorage
weixin_47711357的博客
01-20 4832
监听设置 //添加setItemEvent监听事件 window.addEventListener("setItemEvent", function (e) { //监听key为author的localstorage变化 if(e.key === 'author'){ } }); 移除监听 window.addEventListener("removeItemEvent", function (e) { //监听key为author的localstorag
自定义事件监听&localstorage事件监听
黄彪博客
01-02 2750
文章目录文章参考自定义事件js 自定义对象事件自定义添加localstorage事件监听自定义监听删除localstorage 事件 文章参考 监听localStorage变化（同页面监听） 漫谈js自定义事件、DOM/伪DOM自定义事件 自定义事件 // e 代表触发的事件对象 window.addEventListener("huangbiao", function (e) { c...
给localStorage缓存添加全局监听器
wangshang1320的博客
11-24 145
需求：在做单应用页面的时候，每个组件都是独立的，有时候我们a组件里面的东西修改了，需要b组件进行在a组件修改的同时进行响应，就需要监听器，这种时候我们需要定义监听器并且在b组件里面监听，然后在a组件触发。监听器：可以单独定义一个监听器（事件分发类），也可以用原生提供的，或者直接绑在localStorage上面,这里说下帮在localStorage上面的吧，比较快捷方便。这样就可以简单的实现全局事件分发了。//这里接受到了监听触发。//组件移除需要把事件给移除掉。
详解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
详解Vue监听数据变化原理
12-01
本人最近在学习Vue，从网上查询了很多关于Vue监听数据变化原理，稍微整理精简一下做下分享。 浅度监听 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
vue中的watch监听数据变化及watch中各属性的详解
10-18
主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue3优雅地监听localStorage变化
chengbo_eva的博客
06-07 1831
Vue3优雅地监听localStorage变化
vue中对localStorage的监听（谷歌+火狐）
weixin_45236272的博客
09-19 307
方法二：可在谷歌和火狐中同时进行Window监听。方法一：只在谷歌中进行Windows监听。
vue中监听localStorage的变化
Bright2017的博客
11-15 461
在需要监听localstorage中数据变化的文件中加以下代码。注意： 此方法只能监听到setItem事件.main.js中引入。
localStorage的用法和监听 localStorage值的变化
DTCloud
04-19 1063
当传入一个 key 时，removeItem() 方法会从 localStorage 中删除指定的数据。key() 方法一般用于遍历 localStorage 中所有的数据时，传入一个以 0 开始计数的数字，它会返回对应的 key 的名字。调用此方法后，会清空当前域名下所有存储在 localStorage 中的数据。调用时不需要传入任何参数。getItem() 方法可以用来访问已存储在浏览器 localStorage 中的数据。从它的名字可以得知，此方法可以用来存储数据到 localStorage 中。
监听localStorage中的数据变化
02-20 3898
没有太好的办法，重写localstorage 1、我们可以用window.dispatchEvent()这个方法来派发一个事件，让window去监听。新实例出来的这个事件会被绑定到window上来监听它的调用，当调用的时候可以拿到setItem的新值，直接赋值就可以 具体实现 2、先在src下新建utils文件夹，新建tools.js，它会抛出一个dispatchEventStroage方法 3、 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件 4
vue中如何监听localStorage值的变化
风如也的博客
10-05 3624
vue中监听localStorage值的变化
【Jquery】------- Jquery 监听本地存储 sessionStorage,localStorage 的键值 示例代码
皮皮冰要做大神
09-21 1189
//监听本地存储 RISKID 键 值 window.addEventListener('storage',function (e) { //获取被修改的键值 if (e.key == 'RISKID') { console.log(e); } },false); 提示：自己测试 就能明白怎么使用了 ...
如何监听storage仓库变化(只限localstorage)
Coder_FHH的博客
07-19 2360
必备知识： Event() 构造函数, 创建一个新的事件对象 Event。第一个参数为所创建事件的名称。 LocalStorage： 默认情况下，当前页面修改localStorage，本页面是无法监听的，只有同源的其他页面才可以监听到本页面localStorage的改变。 所以默认监听localstorage变化的三个条件： 至少打开了两个同源页面 其中一个页面修改了localStorage 另外的同源页面做了localStorage的监听 监听方法： // 回调的e对象中含有localStorage改
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 值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值