实现浏览器内多标签通信有多种方法， 可以使用WebSocket、SharedWorker；也可以调用localstorge、cookies等本地存储方式；这里介绍使用localStorage方法实现。
使用 localStorage实现浏览器内多标签通信
localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。
下面的例子是由b页面监听a页面的事件变化并记录
//a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器内多页面通信 </title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name); //存储数据
});
});
</script>
</head>
<body>
<input id="name">
<input type="button" id="btn" value="提交">
</body>
</html>
页面a中只有一个输入框和一个提交按钮，当点击提交后，用localStorage.setItem进行数据存储
//b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
window.addEventListener("storage", function(event){
console.log(event.key + "=" + event.newValue);
});
});
</script>
</head>
<body>
</body>
</html>
ｂ页面中使用addEventListener进行事件监听，输出事件信息
实现效果：
a
b
