本地页面之间共享消息或变量（localStorage）

来源：互联网发布：手机录音软件排行编辑：程序博客网时间：2024/06/03 13:40

概述：

由于为了管理，分类，我们不会虽然呈现成一个页面，实际上是多个页面组成，最普通标签内嵌标签<iframe>，但是问题来了，如果我点击A页面某个内容，B页面怎么知道点击这个页面而自动更新，前面记得有一篇通过Cookie进行实现，用户可能会禁用cookie，这样cookie方法有局限性，刚才在其他地方找到一个另外的方法来实现页面之间共享变量，如果两个同域（相同的协议、主机名、端口）的网页进行通讯，可以使用localStorage,如果是不同主机名和端口可以使用postMessage:参考-http://www.cnblogs.com/dolphinX/p/3464056.html，这里学习一下简单localStorage用法

点击按钮随机变化背景颜色

1、首先看第一个a.html

<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"><title>页面之间传递消息</title></head><body><input type="button" value="变色" id="btn"><iframe id="iframe" src="./b.html" frameborder="0"width="100%" height="600px"> </iframe><!-- 引入jquery.js --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script><script type="text/javascript">$("#btn").click(function(){var r = Math.ceil(Math.random()*255);var g = Math.ceil(Math.random()*255);var b = Math.ceil(Math.random()*255);localStorage.setItem("rgb",r+","+g+","+b);});</script></body></html>

总结：

1、主要标签只要一个按钮和一个<iframe>标签（也就是内嵌b.html页面）
2、为按钮绑定点击事件，随机生成rgb三个值，然后以逗号隔开拼成一个字符串
3、设置localStorage.setItem("键","值") 【localStorage就是全网页的全局变量】

2、再看看内嵌网页b.html

<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"><title>页面之间传递消息</title></head><body><div id="rect" style="width:400px;height:500px"></div><!-- 引入jquery.js --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script><script type="text/javascript"> window.addEventListener("storage",function(e){    if(e.key=="rgb"){        var rgb=localStorage.getItem("rgb")     var rgbArr=rgb.split(",");        var r = parseInt(rgbArr[0]);        var g = parseInt(rgbArr[1]);        var b = parseInt(rgbArr[2]);        var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);        $("#rect").css("background-color",hex);    }});</script></body></html>

总结：

1、窗口监听事件"storage", 判断值是否改变（这就需要注意，它触发的条件值改变，如果值不改变将会不会触发事件，可以加上随机数或时间戳）
2、localStorage.getItem("rgb")获取a.html页面设置的值
3、var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); 将rgb转换成16进制字符串
4、$("#rect").css("background-color",hex); 设置css样式背景颜色

效果：（不断点击改变颜色）

总体思路就是通过某个值改变触发另一个网页改变，自由发挥。。。。。

参考：https://segmentfault.com/q/1010000009220119

阅读全文

0 0