localstorage与storage事件监听

最新推荐文章于 2024-07-01 00:20:20 发布
原创 最新推荐文章于 2024-07-01 00:20:20 发布 · 621 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解析了如何在同源环境下，当一个页面修改localStorage时，另一个页面通过注册storage事件实现数据变化的通知。关键在于理解浏览器的同源策略和localStorage的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

参考代码地址：暂无

（八）webStorage使用实例——利用storage事件实时监视webStorage中的数据
lmb55的专栏
07-03 3088
在HTML5中，可以通过window对象的storage事件进行监听并指定其事件处理函数的方法来定义当其在其他页面中修改sessionStorage或localStorage中的值时所要执行的处理，代码如下：   window.addEventListener('storage',function(){ //当sessionStorage或localStorage中的值
自定义事件监听 & LocalStorage 事件监听
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-09 1038
基本概念与作用1. 自定义事件2. LocalStorage 事件监听示例一：创建自定义事件示例二：自定义事件在组件间的通信示例三：使用 LocalStorage 存储数据示例四：监听 LocalStorage 变化示例五：综合应用功能使用思路多种场景下的应用使用技巧在现代前端开发中，事件监听是一种非常重要的交互方式。它不仅限于浏览器默认提供的点击、滑动等事件，还可以通过自定义事件来实现更复杂的业务逻辑。此外，随着Web存储技术的发展，成为了客户端存储的一种常见选择。但是，如何在数据发生变化时得到通知呢？
sessionStorage || localStorage 的storage事件
学如逆水行舟，不进则退
04-28 3207
storage事件 当储存的数据发生变化时，会触发storage事件。我们可以指定这个事件的回调函数。 window.addEventListener("storage",function onStorageChange(event) { console.log(event.key); }); 回调函数接受一个event对象作为参数。这个event对象的
localStorge之storage事件
06-13 5848
随着h5的流行和mobile web端开发，localStorge
localStorage监听
2301_81965558的博客
06-19 327
localStorage监听实现通过改写localStorage.setItem方法，增加了一个事件通知机制，使得每当有数据写入本地存储时，都会触发一个自定义事件，便于开发者监听这一变化并作出相应的处理。
HTML5本地储存--利用storage事件实时监听Web Storage
u010227042的博客
10-18 682
在事件处理函数中，触发事件的事件对象（event参数值）具有如下几个属性 event.key 属性：属性值为在 session 或 localStorage 中被修改的数据键值。 event.oldValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改的值。 event.newValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改后的值 event.url 属性：属性值为修改 sessionStorage 或 loca
详解vuex结合localstorage动态监听storage的变化
08-27
本文详细介绍了如何将Vuex与LocalStorage结合使用，并动态监听LocalStorage中的数据变化，从而达到在不同组件间共享数据并且响应数据变化的目的。 首先，Vuex和LocalStorage各自有不同的特点和应用场景。Vuex将状态...
localStorage 和 sessionStorage 支持storage事件监听
最新发布
02-24
对于 `localStorage`，可以通过监听 `storage` 事件来检测其他标签页或窗口对该存储空间所做的更改。然而需要注意的是，`storage` 事件无法在同一页面内触发，即如果是在同一个页面修改了 `localStorage` 数据，则该...
【React】如何监听LocalStorage的变化
owo_ovo的博客
06-28 1316
【React】如何监听LocalStorage的变化
Vue 监听 localstorage 变化
weixin_40017062的博客
07-01 2000
Vue 监听localStorage
sessionStorage共享（监听storage事件）
Moon Star
06-02 5586
前言 sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。**在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，**这点和 session cookies 的运行方式不同。 ...
Nuxt监听本地存储localStorage
FitnessSnail的博客
05-30 522
Nuxt监听本地存储localStorage
localStorage监听变化和过期时间设置
vcooto的博客
09-30 261
local-store-pro 增强了我们对localStorage的使用，主要体现在过期时间，和监听功能上。我们很容易上手使用。以下是监听的简单实用。更多细节参考。
localStorage
agoago_2009的专栏
12-06 2404
localStorage sessionStorage.getItem(key):获取指定key本地存储的值 sessionStorage.setItem(key,value)：将value存储到key字段 sessionStorage.removeItem(key):删除指定key本地存储的值 sessionStorage.length是sessionStorage的项目
HTML5本地存储(Local Storage) 的前世今生（二）
jinghuainfo
07-22 179
HTML5本地存储(Local Storage) 的前世今生（二）原文连接：http://diveintohtml5.org/storage.html　（深入HTML5）作者：Mark Pilgrim译者 : feijia (tiimfei@gmail.com) 这篇文章是作者的书HTML5 up & Running的的一个章节，并在线以 CC-BY-3.0 License授权。 这是本...
localstorage 和 storage 事件 用于跨页面通信
qq_44917015的博客
04-19 349
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
html5 storage事件
weixin_34128411的博客
07-15 164
HTML5 虽然很多年了，但是真的了解不不够不够。主题说的是 storage时间，说起对 storage 事件的了解还是从QQ音乐说起。 QQ音乐的主页是 https://y.qq.com , 而实际播放的页面是https://y.qq.com/portal/player.html。你在其他里面点击播放或者添加的时候，你会发现https://y....
HTML5：storage事件
大空翼 つばさ
10-29 1873
H5标准新增的本地存储localStorage已经很熟悉了，但是还有个storage事件监听头一次听说，这个事件可以通过更新localstorage来触发，而且当前在同一个浏览器下打开的所有同源页面都可以监听得到！ 例如，当前在浏览器中打开了tab1和tab2两个标签页，url分别为www.localhost.com/index.html 和 www.localhost.com/list.htm...
如何使用Web Storage对页面中数据进行监听？
CZ-001的博客
09-08 854
(3)在图2-8所示的文本框中输入“userl”，单击“保存”按钮，然后进入开发者工具的Application选项卡，找到Local Storage选项并单击该选项下的http://127.0.0.1:5500地址，可以看到设置的localStorage中Key的值为“usermame”，Value的值为“userl”的数据，如图所示。上述代码中，事件处理函数接收一个event对象作为参数，event对象的key属性保存发生变化的数据的键名。(5)保存代码，在浏览器中进行测试，效果如图2-10所示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值