h5新API之WebStorage解决页面数据通信问题
localStorage相信大家都不陌生,今天我们要讨论的不是怎么存储数据,获取数据。而是看看WebStorage的一些妙用,相信大家在开发中遇到过这样一个场景,一个页面中嵌套一个iframe,iframe中填写了一些数据,关闭iframe后,需要通知页面中变化数据,或者触发某个事件。这个需求说难不难,说简单不简单,解决方式也是五花八门,读者可以在评论区留言。我要说的是,用storage事件机制来解决这个问题。
引用《h5移动web开发指南》上的话:
“当同源页面的某个页面修改了localStorage
,其余的同源页面只要注册了storage事件,就会触发”
所以,localStorage
的例子运行需要如下条件:
- 同一浏览器打开了两个同源页面
- 其中一个网页修改了
localStorage
- 另一网页注册了
storage
事件
很容易犯的错误是,在同一个网页修改本地存储,又在同一个网页监听,这样是没有效果的。
例子
网页A:监听了storage
事件:
<!DOCTYPE html>
<html>
<head lang="en">
<title>A</title>
</head>
<body>
<h1 id="ss"></h1>
<script>
ss.innerHTML=localStorage.getItem("foo");
window.addEventListener("storage", function (e) {
ss.innerHTML=e.newValue;
});
</script>
</body>
</html>
网页B:修改了localStorage
<!DOCTYPE html>
<html>
<head lang="en">
<title>B</title> </head>
<body>
<div>
<h3 id="aa">current value: 0</h3>
<button id="cc">change</button>
</div> <script>
var i=0;
cc.addEventListener("click",function(){
localStorage.clear();
aa.innerHTML="current value: "+i;
localStorage.setItem('foo', i++);
})
</script>
</body>
</html>
是不是很神奇?连个标签之间竟然产生了通信。
<!DOCTYPE html>
<html>
<head lang="en">
<title>A</title>
</head>
<body>
<h1 id="cc"></h1>
<button id="change">change</button>
<script>
localStorage.setItem("xx","val");
var val=localStorage.getItem("xx");
cc.innerHTML=val;
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
var setItemEvent = new Event("setItemEvent");
setItemEvent.newValue = newValue; window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
cc.innerHTML=e.newValue;
});
change.addEventListener("click",function () {
localStorage.setItem("xx","1234");
})
</script>
</body>
</html>
这里用到了自定义事件,也是H5新增API
通过iframe方式也可以达到目的
<!DOCTYPE html>
<html>
<head lang="en">
<title>B</title> </head>
<body>
<div>
<h3 id="aa">current value: 0</h3>
<button id="cc">change</button>
</div> <iframe src="a.html" frameborder="0"></iframe>
<script>
var i=0;
cc.addEventListener("click",function(){
localStorage.clear();
aa.innerHTML="current value: "+i;
localStorage.setItem('foo', i++);
})
</script>
</body>
</html>
h5新API之WebStorage解决页面数据通信问题的更多相关文章
- Android浏览本地 API文档 + 解决页面加载慢的问题
火狐浏览器安装离线浏览插件: 用浏览器打开index.html文件,你会发现加载的很慢,原因你懂的,为此,我们可以通过离线的方式 查看本地API文档,用火狐浏览器 + Work Offline插 ...
- ES6的新API如Promise,Proxy,Array.form(),Object.assign()等,Babel不能转码, 使用babel-polyfill来解决
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promis ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
- H5新特性-视频,音频-Flash-canvas绘图
json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...
- H5新标签(适合新手入门)
H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 < ...
- h5新增加的存储方法
h4中使用的cookie把用户信息保存在客户端浏览器,但是它受到很多限制. 大小:最多能存储4k 带宽:它是随着http请求一起发送到服务器的,因此浪费一部分的带宽. 复杂度:操作复杂. h5新增加了 ...
随机推荐
- 02-HTML5新的input属性
本节重点 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证 本节介绍新的输入类型: date datetime datetime-local email month numb ...
- DOJO常用的函数
DOJO常用的: 1,通过dojo.require以类似C编程中#include或者Java中import的方式加载所需的部件如dojo.require("dojo.parser" ...
- kudu记录-kudu原理
1.kudu是什么? 2.kudu基本概念 特点: High availability(高可用性).Tablet server 和 Master 使用 Raft Consensus Algorith ...
- Redis在Windows上使用和集群配置
一.什么是Redis Redis是一个开源的,使用C语言编写的面向键值对类型的分布式Nosql数据库系统,功能类似Memcache,但比Memcache功能更丰富.官网地址:https://redis ...
- vs2017_enterprise正式版离线安装包bt下载
vs2017_enterprise正式版离线安装包bt下载 点击这里下载种子 磁力链接 安装前请先打开certificates目录,安装里面的三个证书 离线下载教程 : https://docs.mi ...
- 纯js异步无刷新请求(只支持IE)【原】
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
- Python探测主机端口是否存活
#!/usr/bin/python3 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) result = s ...
- luogu P3924 康娜的线段树
题面传送门 我们可以画图找规律 这里没图,要看图可以去看M_sea dalao的题解(逃 可以发现单个节点\(i\)对答案的贡献为该节点的点权\(*\frac{1}{2^{dep_i}}\)(\(de ...
- WEB即时通信
问题 传统的浏览器通信方式:基于HTTP协议的请求/响应模式. 早期:通过刷新浏览器来更新服务器端的数据 后来Ajax(XMLHttpRequest是核心):可以不用刷新浏览器更新服务器端数据.但是这 ...
- 虚拟树研究-CheckBox初步判断只能在第一列
//虚拟树研究-CheckBox初步判断只能在第一列 procedure TWindowsXPForm.XPTreeInitNode(Sender: TBaseVirtualTree; ParentN ...