使用localStorage进行跨标签页通讯

最新推荐文章于 2024-05-11 21:23:11 发布
最新推荐文章于 2024-05-11 21:23:11 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： 前端知识合集 文章标签： localStorage 跨标签页通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BAOBAB_cc/article/details/79566183
版权

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
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用HTML5 LocalStorage实现跨页面通信channel
weixin_30348519的博客
04-22 136
参考文档 转载于:https://www.cnblogs.com/suncj/p/4446851.html
一个基于LocalStorage的跨页面JS队列
BuquTianya的专栏
08-14 2287
借助localStorage做存储介质的栈存储器，用于在大页面中包含很多返回/完成时向上一个页面回返，但浏览器的返回又不能包含所有情况的场景。 *使用时，在用户登录页面可以调用clear方法，清空之前的数据， *如果不清空历史数据的话，一般情况也不会有问题，因为后续进栈的数据一般来说第一个页面是没有返回按钮的。 *实例化时可以指定maxSize，如果指定那么栈中将仅存储指定数量的item，如果
跨标签页通信
最新发布
weixin_72579045的博客
05-11 618
跨标签通信，boradCastChannel，serviceWorker，postMessage，indexDB，sharedWorker，localStorage,Websocket
利用localStorage 来做页面之间的通信
huanlesyaya的博客
12-20 737
上周做了一个h5的互动小游戏（升官发财阉割版），是用ifrrame结合postMessage来做通信，其中发现了iframe不少的兼容问题，在移动端就更加不友好，所以这次开发(升官发财完整版)决定换个通信方式，用localStorage来做通信。localStorage可以在多个标签页做通信。 localStorage做通信需要满足两个以下几个条件 1.同一浏览器打开了两个同源的页面，这里分别给他...
使用localstorage,cookie实现页面通信
wyhcyzai99的博客
08-16 126
调用localstorage 在一个标签页里面使用Locastorage.setItem(key,value)添加/修改/删除 内容； 在另一个标签页里面监听storage时间，即可得到localstorage存储的值，实现不同标签页之间的通讯。 在一个标签页调用 loacalStorage.setItem(name,val) 保存数据 **localStorage.removeItem(name)** 删除数据的时候会触发**‘storage**事件 在另外一个标签页监听document对象的storag
通过localStorage实现页面通信的方法
糖醋闷油瓶的博客
10-11 204
/** * @param {Object} s 页面之间通信的标识符，需要通信的页面之间该标识符必须一致 * @param {Object} f 触发执行的方法（本页面需要被触发的方法） * 该方法在需要通信的每个页面上都必须调用 */ function pagesCommunication(s, f) { //监听事件，内部调用传入的方法 var listenerFun = func...
javascript父子页面通讯实例详解
10-23
- 父页面可以通过`window.frames[index]`或`window.frames["frameName"]`获取子页面的`Window`对象，其中`index`是子页面在`frames`数组中的位置，`frameName`是子页面`<iframe>`标签的`name`属性值。获取到`Window...
idrt:我没有重建标签页
05-26
"IDRT: 我没有重建标签页" 是一个与JavaScript相关的项目，主要目的是为了在基于Web的消息传递应用程序（如即时通讯软件或者单页应用）中实现数据恢复和状态保存功能。IDRT，全称为"Idling Detection and Resume Tab...
H291_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
5. **Canvas**：元素是HTML5中的画布，允许开发者使用JavaScript进行动态图形绘制，如游戏、图表、动画等。 6. **SVG**：Scalable Vector Graphics（可缩放矢量图形）是一种基于XML的图像格式，用于创建高质量的...
html 仿qq登录页面
07-22
可以使用`class`或`id`选择器来对特定元素进行样式定制。 - 使用`display: flex`或`grid`布局可以轻松实现元素的对齐和排列，使其在不同屏幕尺寸下保持良好的响应性。 - 背景图片和颜色搭配可以营造出QQ特有的品牌...
30种手机网页页面制作模板.zip
12-27
3. **离线存储**：`applicationCache`和`localStorage`允许网页在离线状态下也能访问一部分数据，提高用户体验。 4. **表单控件增强**：新的表单元素如`<input type="date">`, `<input type="range">`等，提供了更...
同一个网站，两个标签页使用localStorage进行实时通信
不会java的java程序员
12-20 405
同一个网站，不同标签页进行通信。常见场景就是数据列表和新增页面在不同标签页，新增完数据后又想要数据列表页面进行实时刷新。
利用localStorage事件来跨标签页共享sessionStorage
liudanyang_21的博客
06-29 661
//干货 利用localStorage事件来跨标签页共享sessionStorage //因为cookie保存字节数量有限，很多童鞋考虑用html5 storage来保存临时数据，Sessionstorage就比较适合来保存临时数据了。 //但有个问题呵：Sessionstorage:不支持跨标签页共享数据，就是说Sessionstorage只在同一个页面内有效，即使同一域名，新打开一个tab窗口，也是不能共享Sessionstorage的。 //那么有没有办法呢，那是有的.... //原理是运用了Eve.
html5本地存储li标签,HTML5本地存储：localStorage即时贴例子（存放读取）
weixin_42500866的博客
06-15 315
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 278
localStorage sessionStorage 这俩东西，两者都是存储在前端的，前者存储无期限，后者在关闭浏览器的时候自动销毁 具体在js的用法 localStorage.setItem("endDateStr",“2017-01-01”); 一次set 只要没执行clear（清除...
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
weixin_39948309的博客
11-24 898
戳蓝字「前端技术优选」关注我们哦！引言在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会...
js 同源页面间通信 storage 和跨域页面间通信 postMessage
haogemr的博客
09-08 3735
同源页面间通信，storage事件监听介绍使用扩展跨域页面间通信 postMessage介绍使用安卓平台差异化处理安全问题 同源页面间通信，storage事件监听 参考博客：h5 storage事件监听 介绍 当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发，所以满足触发监听的条件有三个： 同一浏览器打开了两个同源页面 其中一个网页修改了localStorage 另一网页注册了storage事件 注意：在同一个网页修改本地存储，又在同一个网页监听，.
前端开发面试题——HTML篇（你想要的，都在这里）
weixin_34356310的博客
10-22 75
HTML DOCTYPE作用？标准模式与兼容模式各有什么区别？ 1 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。2 标准模式中，排版和JS运作模式都是以该浏览器支持的最高标准运行；　兼容模式中，页面以宽松的向后兼容的方式呈现，模拟老式浏览器的行为以防止站点无法工作。 HTML5为...
html读取localstorage,HTML Window localStorage用法及代码示例
weixin_31052141的博客
06-17 953
HTML DOM窗口的localStorage属性允许您使用对象在Web浏览器中存储值对。这是一个只读属性。即使关闭浏览器，该对象也不会过期。因此，数据永远不会丢失。用法:window.localStorage使用以下命令将数据保存到localStorage：localStorage.setItem("key", "value");使用以下命令从localStorage读取数据：var name ...
如何使用 localStorage 进行重定向展示页面
04-14
如果您想要进行页面重定向，可以使用 JavaScript 中的 window.location 属性，将要跳转的页面 URL 赋值给该属性即可实现页面重定向。例如，使用以下代码实现页面重定向： ``` // 存储数据 localStorage.setItem('...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值