localstorage和postmessage

2026-08-03

HTML5 postMessage 和 localStorage 实现窗口间通信

LocalStorage(不能跨域) 基本思想:通过localStorage的标准事件storage来实现跨页面通信,即页面A通过写入特定数据触发页面B的storage事件,页面B响应之后再写入数据通知页面A处理结果: 引言随着Web技术的发展,涌出了越来越多的复杂的应用.诸多Web应用逐渐向增强用户体验方向发展.在诸如付款.在线聊天等场景中,有时需要多页面进行数据通信.以前的实现方法有cookie.服务器中转.Flash插件等方法,而HTML5提供了新的LocalStorage API,能够

Ipad Safari iframe cookie 当浏览器默认禁用第三方COOKIE

前一阵子,我们发现高版本的Safari中默认会阻止第三方cookie,如下图所示. 问题什么是第三方cookie呢?在访问一个网站A时,网站A算作第一方,如果网站A中引用了另一个网站X(网站X的域名与网站A的域名不同)的资源,这时这个网站X就被认为是第三方.需要注意的是,这儿区分不同网站的标准是域名是否相同,而不是这两个网站是否由同一个公司运营.比如,taobao.com和tmall.com被认为是两个网站,尽管它们都属于阿里集团. 在网站建设中,使用第三方资源非常常见,大多数据情况下,这并不

H5中用postMessage传递数据，解决localStorage不能跨域问题

localStorage不能跨域,所以在A域名下用localStorage.YourKey方式存储的值,在B域名下是不能取到的. 所以需要转变思路,目前主要使用的两种方式: 一种方式:在A.B两个页面使用document.domain设置为相同的域名,但两个页面需要遵循同源策略,即协议,端口(如果有指定)和域名都相同:在根域范围内,允许把domain属性的值设置为它的上一级域. 另一种方式是推荐方式:在A域下,用postMessage方法把需要保存的数据传递过去,再在B域下接收并保存.postM

浅谈postMessage跨域通信与localStorage实现跨域共享

https://www.cnblogs.com/tyrion1990/p/8134384.html

[分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localstore,demo见http://xueduany.github.io/localstore/,下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstorage

html5 postMessage解决跨域、跨窗口消息传递

一些麻烦事儿平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法,但html5引入的message的API可以更方便.有效.安全的解决这些难题.postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递. postMessag

HTML5 postMessage 和 onmessage API 详细应用

随着 HTML5 的发展,了解并熟悉 HTML5 的 API 接口是非常重要的.postMessage(send) 和 onmessage 此组 API 在 HTML5 中有着广泛的应用,比如 Web Workers 中应用此组 API 实现多个线程间 JavaScript 调用功能 ,Cross-document messaging 中实现两个不同域间 JavaScript 调用功能等等.本文主要介绍此组 API 在 Web Workers,Cross-document messaging,W

使用 html5 postMessage 实现跨域

英文原文中文翻译因为web的安全机制,浏览器的同源策略.在不同域之间做数据交换就会涉及到跨域.A域如果要实现向B域发关消息,多多少少要有对B域有一定控制权,最起码人家B域要接收你的消息啊. 最近发现几个内容不错.结构固定.定时更新的网站,于是想在浏览这些内容的同时,直接转到我的博客里来.但因为一来要调整部分内容,二来对方站不让爬(我的爬虫技巧也是很一般).就想着写个油猴子脚本把内容发到我的网站上. 很快我就写好了接收接口,接下来就是跨域发送消息了.我第一个想到的就是iframe的方式.当然也

localStorage的跨与实现方案

实现原理: HTML5 的 postMessage 为解决跨域页面通信提供了一套可控的机制, 而 localStorage 则提供了易用简洁的本地存储方案? 这两者结合起来,能否实现跨域的本地存储呢 ? 答案是可以的.假设有 a.com 和 b.com 两个页面.我们想通过 a 页面去修改 b 页面的本地数据. 我们需要做如下步奏: 在 a 页面创建一个 iframe ,嵌入 b 页面 a 页面通过 postMessage 传递指定格式的消息给 b 页面 b 页面解析 a 页面传递过来的消息内容

浅谈postMessage多页面监听事件

最近做了一个Echarts和Highcharts多图多页面连动的效果,就用到postMessage 如下介绍: 最开始在最外围的页面也就是所有页面的父级页面添加postMessage监听事件以便监听下面子级页面的动态,代码: window.parent.addEventListener('message',function(e){ if(e.source != window.parent) return; var names = localStorage.getItem("toName"

html5 postMessage解决跨域、跨窗口消息传递[转载]

原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法,但html5引入的message的API可以更方便.有效.安全的解决这些难题.postMessage()方法允许来自不

html5 postMessage 实现类似 sendMessage 的同步效果，支持跨域

实现一个客户端发送 “save 一个答案,在获取答案, 跨域的另一个页面中,回调返回”3“的场景. 客户端:请在 http://127.0.0.1/pk/index.html 打开 <html> <meta charset="utf-8" /> <head> <title> 测试页面, http://127.0.0.1/pk/index.html </title> </head> <body> <

html5 postMessage解决跨域、跨窗口消息传递（转）

仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法,但html5引入的message的API可以更方便.有效.安全的解决这些难题.postMessage

localstorage跨域解决方案

localstorage也存在跨域的问题, [解决思路如下] 在A域和B域下引入C域,所有的读写都由C域来完成,本地数据存在C域下; 因此 A哉和B域的页面必定要引入C域的页面; 当然C域最好是主域,原因后面会提到(在localstorage 不方便的情况下使用cookie); [A域][B域]需要读写时,通过postMessage 向[C域]发送跨哉消息, [C域]监听跨域消息,在接到批定的消息时进行读写操作, [C域]接到跨域消息时,如果是写入删除可以不做什么,如果是读取,就要先读取本域本

转：localStorage 还能这么用

地址:https://iammapping.com/the-other-ways-to-use-localstorage/ localStorage 还能这么用 HTML5中 Web Storage 的出现,主要是为了弥补使用 Cookie 作为本地存储的不足.Cookie 存储的数据量非常小,而且数据会自动携带到请求头里,但服务器端可能并不关心这些数据,所以会造成带宽的浪费. Web Storage 提供了两个存储对象:localStorage 和 sessionStorage. sessio

前端 JS，localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输

需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求就是:如何在每个页面之间实现数据共享,比如用户进入下个选择页面之后怎么保存用户在上一个页面选择的数据,以便最后统一提交,因为这个项目比较独立,而且也只是简单的几个页面做统计需求,所以我并没有采用angularjs来搭建项目,所以没有用angular里面路由带参数的形式来向下一个页面传递数据,但是我这

localStorage跟cookie的使用

最近做了记住密码功能,用localStorage跟cookie都尝试用了一下,感觉都挺好哈,很方便,特此记录 html代码: <input type="text" id="userName" placeholder="账号"> <input type="password" id="password" placeholder="密码"/> <input cla

H5 localStorage入门

定义只读的 localStorage 允许你访问一个 Document 的远端(origin)对象 Storage:数据存储为跨浏览器会话.localStorage 类似于 sessionStorage,区别在于,数据存储在 localStorage 是无期限的,而数据存储在 sessionStorage 会被清除,当页面会话结束时--也就是说当页面被关闭. 属性 length localStorage 内键值对的数量. localStorage.length // 0 localStorag

vue 给嵌套的iframe子页面传数据 postMessage

Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe> 父页面发送数据参数: <script> e

localStorage和cookie的跨域解决方案

原文转自:点我前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙伴没有遇到或者不是很清楚,下面这篇文章,我来简单的聊聊! 业务场景 cookie跨域的业务场景很多,例如: 1.百度www域名下面登录了,发现yun域名下面也自然而然登录了. 2.淘宝登录了,发现天猫也登录了,淘宝和天猫是完全不一样的2个域名. cookie跨域首先说说同一个主域下面的跨域问题,类

localstorage和postmessage

热门专题