使用localStorage进行跨标签页通讯

最新推荐文章于 2024-08-16 11:45:21 发布
最新推荐文章于 2024-08-16 11:45:21 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： 前端知识合集 文章标签： localStorage 跨标签页通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BAOBAB_cc/article/details/79566183
版权
本文介绍了如何使用localStorage进行跨标签页通讯。讲解了localStorage与sessionStorage的区别，重点阐述了通过监听storage事件来实现在同源页面间的通信，并探讨了localStorage的局限性——仅限于同源策略。通过一个具体的情景描述——用户登录状态在多个标签页间的同步，以及配套的A.html和B.html页面的demo展示，详细解释了该技术的应用。
摘要由CSDN通过智能技术生成

localStorage API

什么是localStorage

提起localStorage，往往还牵扯到sessionStorage，它们都是web Storage的API，表示浏览器端数据存储。而区别是，sessionStorage会随着页面的关闭而销毁，localStorage则可永久存储。

标签页间通讯

localStorage的增删改，都会触发其storage事件，通过监听这个事件，控制它的值进行页面通讯。

localStorage的局限

只适用与同源页面，也就是协议，端口，域名相同的页面。

情景描述

用户在网站 A页面 中登录，在B页面退出，A页面与B页面的登录状态保持一致。

demo展示

  • 使用node.js构建服务器，确保A、B页面不违背同源策略

  • A页面默认登录状态，在B页面退出登录时，A页面也退出登录

A.html

<!DOCTYPE html>
<html
最低0.47元/天 解锁文章
BAOBAB_cc
关注
专栏目录
利用HTML5 LocalStorage实现跨页面通信channel
weixin_30348519的博客
04-22 140
参考文档 转载于:https://www.cnblogs.com/suncj/p/4446851.html
一个基于LocalStorage的跨页面JS队列
BuquTianya的专栏
08-14 2314
借助localStorage做存储介质的栈存储器，用于在大页面中包含很多返回/完成时向上一个页面回返，但浏览器的返回又不能包含所有情况的场景。 *使用时，在用户登录页面可以调用clear方法，清空之前的数据， *如果不清空历史数据的话，一般情况也不会有问题，因为后续进栈的数据一般来说第一个页面是没有返回按钮的。 *实例化时可以指定maxSize，如果指定那么栈中将仅存储指定数量的item，如果
跨window、夸标签页数据传递解决方案
weixin_45188171的博客
07-15 154
接受页面通过事件监听方可接收到参数。
local storage在不同标签页，不同浏览器之间通用吗，可以跨域吗
weixin_43801836的博客
10-20 3093
local storage不可以跨域，但是可以使用iframe+postmessage可以实现。localStorage相比而言可以在多个标签页中共享数据，sessionStorage只适用于同一个标签页，：同源页面，也就是协议，端口，域名相同的页面。当然不能跨浏览器啦，都不是一个存储系统。
利用localStorage 来做页面之间的通信
huanlesyaya的博客
12-20 752
上周做了一个h5的互动小游戏（升官发财阉割版），是用ifrrame结合postMessage来做通信，其中发现了iframe不少的兼容问题，在移动端就更加不友好，所以这次开发(升官发财完整版)决定换个通信方式，用localStorage来做通信。localStorage可以在多个标签页做通信。 localStorage做通信需要满足两个以下几个条件 1.同一浏览器打开了两个同源的页面，这里分别给他...
使用localstorage,cookie实现页面通信
wyhcyzai99的博客
08-16 137
调用localstorage 在一个标签页里面使用Locastorage.setItem(key,value)添加/修改/删除 内容； 在另一个标签页里面监听storage时间，即可得到localstorage存储的值，实现不同标签页之间的通讯。 在一个标签页调用 loacalStorage.setItem(name,val) 保存数据 **localStorage.removeItem(name)** 删除数据的时候会触发**‘storage**事件 在另外一个标签页监听document对象的storag
前端开发者必看：探索跨标签页通信的多种方式
最新发布
我码玄黄的博客
08-16 1173
探索前端跨页面通信的多种方案，包括BroadcastChannel、window.opener、postMessage、MessageChannel、storage事件、SharedWorker等。
两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？
weixin_36278346的博客
06-07 2761
引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会更新。跨页面通信实例这就是我们所说的前端跨页面...
javascript父子页面通讯实例详解
10-23
- 父页面可以通过`window.frames[index]`或`window.frames["frameName"]`获取子页面的`Window`对象，其中`index`是子页面在`frames`数组中的位置，`frameName`是子页面`<iframe>`标签的`name`属性值。获取到`Window...
网络攻防中黑客常用技术跨站脚本技术：DOM XSS高发场景透视及修复技巧、取值写入页面或动态执行、使用HTML5 postMessage进行跨域通讯、使用存在缺陷的第三方库或通用组件
代码讲故事
03-08 346
网络攻防中黑客常用技术跨站脚本技术：DOM XSS高发场景透视及修复技巧、取值写入页面或动态执行、使用HTML5 postMessage进行跨域通讯、使用存在缺陷的第三方库或通用组件。 DOM-Based XSS是一种基于文档对象模型(Document Object Model,DOM)的Web前端漏洞，简单来说就是JavaScript代码缺陷造成的漏洞。与普通XSS不同的是，DOM XSS是在浏览器的解析中改变页面DOM树，且恶意代码并不在返回页面源码中回显，这使我们无法通过特征匹配来检测DOM XSS
通过localStorage实现页面通信的方法
糖醋闷油瓶的博客
10-11 213
/** * @param {Object} s 页面之间通信的标识符，需要通信的页面之间该标识符必须一致 * @param {Object} f 触发执行的方法（本页面需要被触发的方法） * 该方法在需要通信的每个页面上都必须调用 */ function pagesCommunication(s, f) { //监听事件，内部调用传入的方法 var listenerFun = func...
同一个网站，两个标签页使用localStorage进行实时通信
不会java的java程序员
12-20 446
同一个网站，不同标签页进行通信。常见场景就是数据列表和新增页面在不同标签页，新增完数据后又想要数据列表页面进行实时刷新。
利用localStorage事件来跨标签页共享sessionStorage
liudanyang_21的博客
06-29 677
//干货 利用localStorage事件来跨标签页共享sessionStorage //因为cookie保存字节数量有限，很多童鞋考虑用html5 storage来保存临时数据，Sessionstorage就比较适合来保存临时数据了。 //但有个问题呵：Sessionstorage:不支持跨标签页共享数据，就是说Sessionstorage只在同一个页面内有效，即使同一域名，新打开一个tab窗口，也是不能共享Sessionstorage的。 //那么有没有办法呢，那是有的.... //原理是运用了Eve.
html5本地存储li标签,HTML5本地存储：localStorage即时贴例子（存放读取）
weixin_42500866的博客
06-15 324
window.onload = init//页面加载时我们将调用init函数function init() {//它会从localstorage读取所有的即时贴，并通过DOM把他们增加到ul中var button = document.getElementByIdx_x_x_x("add_button");button.onclick = createSticky; //按钮事件var stick...
HTML 5 Web 存储 前端跨页面获取某个值
chengzhu0614的博客
09-16 287
localStorage sessionStorage 这俩东西，两者都是存储在前端的，前者存储无期限，后者在关闭浏览器的时候自动销毁 具体在js的用法 localStorage.setItem("endDateStr",“2017-01-01”); 一次set 只要没执行clear（清除...
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
weixin_39948309的博客
11-24 941
戳蓝字「前端技术优选」关注我们哦！引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会...
js 同源页面间通信 storage 和跨域页面间通信 postMessage
haogemr的博客
09-08 4273
同源页面间通信，storage事件监听介绍使用扩展跨域页面间通信 postMessage介绍使用安卓平台差异化处理安全问题 同源页面间通信，storage事件监听 参考博客：h5 storage事件监听 介绍 当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发，所以满足触发监听的条件有三个： 同一浏览器打开了两个同源页面 其中一个网页修改了localStorage 另一网页注册了storage事件 注意：在同一个网页修改本地存储，又在同一个网页监听，.
京东一面：浏览器跨标签页通信的方式都有什么？
程序员成长指北
04-03 76
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群跨标签通信也有很多实际的应用场景，比如：共享登录状态：当用户在一个标签页中登录后，其他打开的标签页需要及时获取到登录状态，以保持一致的用户体验。在这种情况下，可以使用浏览器的localStorage或sessionStorage来存储登录状态，并通过监听storage事件来实现不同标签页之间的状...
如何使用 localStorage 进行重定向展示页面
04-14
localStorage 用于在浏览器中存储数据，无法直接实现重定向展示页面。如果您想要进行页面重定向，可以使用 JavaScript 中的 window.location 属性，将要跳转的页面 URL 赋值给该属性即可实现页面重定向。例如，使用以下代码实现页面重定向： ``` // 存储数据 localStorage.setItem('key', 'value'); // 获取数据 var value = localStorage.getItem('key'); // 页面重定向 window.location = 'http://www.example.com' ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值