localstorage与storage事件监听

最新推荐文章于 2024-03-27 11:02:43 发布
最新推荐文章于 2024-03-27 11:02:43 发布
阅读量539 收藏
点赞数
分类专栏： JS 原生js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yetian_2000/article/details/113991319
版权
JS 同时被 2 个专栏收录
63 篇文章 2 订阅
订阅专栏
原生js
12 篇文章 0 订阅
订阅专栏

引用《h5移动web开发指南》上的话：

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

所以，localStorage  storage的例子运行需要如下条件：
1. 同一浏览器打开了两个同源页面（同源页面：即同一个电脑里面的同一个文件夹，里面的不同的html页面）
2.其中一个网页修改了localStorage（A页面修改了localstorge）
3. 另一网页注册了storage事件（B页面能监听到变化）

参考代码地址：暂无

Yetian_2000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
本地存储之sessionStorage与localStorage
shhghvvh的博客
12-06 593
目录1.本地存储的特性2.本地存储之sessionStorage(临时存储)2.1特点2.2使用方法2.2.1存储数据2.2.2获取数据 2.2.3删除数据2.2.4清空所有数据3.本地存储之localStorage(局部存储器) 3.1特点3.2使用方法3.2.1存储数据3.2.2获取数据3.2.3删除数据3.2.4清空所有数据1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3.容量较大，sessionStorage约5M、localStorage约20M4.只能存储字符串，可以将对象
localStorage和sessionStorage
wunianisme的博客
10-13 153
HTML5 Web存储包括localStorage和sessionStorage，HTML5 Web是以键值对的形式存储于客户端，通常存储的数据类型为字符串。 localStorage localStorage能够永久存储，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端中保存，不参与和服务器的通信。 常用方法如下： 1.保存数据到本地...
Nuxt监听本地存储localStorage
FitnessSnail的博客
05-30 381
Nuxt监听本地存储localStorage
有关Storage事件监听的疑惑
技术积累，技术分享
10-03 2358
1、Storage事件监听是什么？干什么的？ 在使用Web Storage API存储数据时，当存储的数据发生变化时，会触发window对象的storage事件，通过监听该事件并指定其事件处理函数，可以定义在其他页面中修改sessionStorage或localStorage中的值时所要执行的处理。 监听storage事件的示例代码如下： window.addEventListener("storage", function onStorageChange(event) { console.log(ev
localStorage storage事件
Anticlimax
11-21 2449
一个页面中的本地存储数据被修改时立即更新另一个页面的内容： 主页面： 显示 var txt = document.getElementById("text") var btn = document.getElementById("btn"); btn.addEventListener('
跨页面通信、如何监听 LocalStorage 的变化【storage 事件】
Xpy 的博客
04-02 4075
场景：当涉及到同时打开多个tab页，操作一个tab，希望其他的tab也会同时进行更新状态。 原理就是前度的跨页面通信 一、当 LocalStorage 变化时，会触发storage事件。 在需要改变的页面增加时间监听： window.addEventListener('storage', function (e) { if (e.key === 'ctc-msg') { const data = JSON.parse(e.newValue); const text =
vue3实时监听LocalStorage的变化
最新发布
青莳的博客
03-27 1267
【代码】vue实时监听LocalStorage的变化。
详解vuex结合localstorage动态监听storage的变化
08-27
主要介绍了详解vuex结合localstorage动态监听storage的变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue使用localStorage存储数据的方法
10-16
`localStorage` 是Web Storage API的一部分，它允许开发者在浏览器端存储 key-value 对的形式的数据，且数据不会随着浏览器会话的结束而消失，即在浏览器关闭后再打开，数据仍然存在。然而，`localStorage` 只支持...
LocalStorage
03-26
3. **事件监听**：为了实时处理LocalStorage的变化，可以监听`storage`事件，但这个事件仅在不同窗口或标签页更改LocalStorage时触发，同一窗口内的变化不会触发。 4. **兼容性**：LocalStorage是HTML5标准的一部分...
vue2-storage:通过浏览器存储包装JavaScript或Vue.js应用
05-02
Vue2-Storage是一款针对Vue.js应用的浏览器存储插件，旨在简化JavaScript或Vue.js应用程序对浏览器本地存储（localStorage）和会话存储（sessionStorage）的使用。它通过提供一个易于理解和使用的API，使得数据存储...
vue 项目中监听 localStorage 或 sessionStorage 的变化
热门推荐
LonewoIf的博客
05-29 1万+
一、首先在 main.js 中给 Vue.protorype 注册一个全局方法，然后创建一个 StorageEvent 方法，当我在执行sessionStorage.setItem(k, val) 的时候，初始化事件并派发事件。 /** * @description * @author (Set the text for this tag by adding docthis.authorNam...
JS 当前页面监听localStorage的更新事件
weixin_43846071的博客
11-15 8108
JS 当前页面监听localStorage的更新事件不同页面监听localStorage的更新事件当前页面监听localStorage的更新事件完整版测试代码 不同页面监听localStorage的更新事件 直接在另一个html页面添加监听事件即可 window.addEventListener("storage", function(e) { console.log(e) }); 注意：同...
js监听localStorage
weixin_47711357的博客
01-20 4844
监听设置 //添加setItemEvent监听事件 window.addEventListener("setItemEvent", function (e) { //监听key为author的localstorage变化 if(e.key === 'author'){ } }); 移除监听 window.addEventListener("removeItemEvent", function (e) { //监听key为author的localstorag
localStorge之storage事件
06-13 5758
随着h5的流行和mobile web端开发，localStorge
真正的浏览器磁盘缓存 LocalStorage
lefex的博客
10-29 1271
前面我们学习了 cookie 和 sessionStorage，他们都具有存储功能，但各有各的用途。今天我们学习 LocalStorage，它才是真正的缓存机制，也就是我们通常说的磁盘缓...
自定义localStorage本地缓存监听
孤傲的博客
08-05 665
自定义localStorage本地缓存监听。
localStorage监听变化和过期时间设置
vcooto的博客
09-30 212
local-store-pro 增强了我们对localStorage的使用，主要体现在过期时间，和监听功能上。我们很容易上手使用。以下是监听的简单实用。更多细节参考。
前端扫盲1
weixin_43910086的博客
06-09 315
无
localstorage的监听事件
07-12
Local Storage 不提供直接的事件监听机制，但可以通过监视存储事件来实现类似的功能。具体来说，可以使用 `window.addEventListener` 监听 `storage` 事件，该事件在 Local Storage 更新时触发。当其他窗口或标签页对 Local Storage 进行更改时，会触发该事件，从而可以捕获到更新的数据。 下面是一个示例代码，演示如何监听 Local Storage 的变化： ```javascript // 监听 Local Storage 的 storage 事件 window.addEventListener('storage', function(e) { console.log('Local Storage 发生变化'); console.log('变化的键：', e.key); console.log('变化的旧值：', e.oldValue); console.log('变化的新值：', e.newValue); console.log('变化的来源：', e.url); }); // 修改 Local Storage 的值 localStorage.setItem('myKey', 'myValue'); ``` 在上述代码中，当通过 `setItem` 方法修改 Local Storage 的值时，会触发 `storage` 事件，并打印出相关信息。你可以根据需要在事件处理函数中执行自己的逻辑。请注意，该事件只在其他窗口或标签页修改 Local Storage 的值时才会触发，在同一窗口中修改不会触发该事件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值