利用localStorage实现浏览器中多个标签页之间的通信

原理：

　　　　localStorage是浏览器存储数据的容器，而且它是多页面共享的，利用localStorage多页面共享的特性，可以实现多个标签页的通信。

　　　　比如： 一个标签页发送消息（将发送的消息设置到localStorage中），一个标签页接收消息（从localStorage中获取消息）

利用 localStorage 方式实现的标签页通信优点？

　　　　相比cookie，容量大，能存储5M左右内容

　　　　发送请求时，不会默认携带，所以不会将所有内容发送到服务器。

　　　　利用storage事件，实时监听localStorage中的变化，无需再使用定时器

缺陷？

　　      localStorage是H5新特性，兼容性没有cookie好

　　　   localStorage中的storage事件，只能监听非己页面的数据变化，而且不同浏览器中的localStorage的存储大小不一样，一般都是5M左右，IE是1M左右　　　

例子：

　　01　　发送消息的标签页（其实就是将要发送的消息设置到localStorage中）　

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>
<body>
                        <!-- 这个页面用来发送信息（设置localStorage的值）  -->
      <input type="text" id='msg1'><br>   <!--输入框  msg1 -->
      <input type="text" id='msg2'><br>   <!--输入框  msg2 -->
      <button id="send">发送</button>     <!-- 点击发送按钮触发send事件 -->
      <script>
            send.onclick=function(){
                  if(msg1.value.trim()!=='' && msg2.value.trim()!==''){  //如果msg1和msg2的内容不是空的，执行if语句
                        localStorage.setItem( 'msg1',msg1.value )      //将输入框msg1中的值，设置到localStorage中，并起名为msg1
                        localStorage.setItem( 'msg2',msg2.value )      //将输入框msg2中的值，设置到localStorage中，并起名为msg2 

                  }                                                   

            }
      </script>
</body>
</html>

02　　接收消息的标签页（其实就是从localStorage中获取消息并显示在页面）

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>
<body>
                  <!-- 这个页面用来接收信息（获取localStorage的值 ） -->
      <h1>收到消息：<span id="recMsg1" ></span></h1>
      <h1>收到消息：<span id="recMsg2" ></span></h1>
      <script>
            // addEventListener 绑定事件监听
            // storage事件，是localStorage特有的事件，只要localStorage中的内容发生改变就会触发该事件（非己页面才能触发）
            render()
            function render(){
                  recMsg1.innerHTML = localStorage.getItem('msg1')//获取localStorage中msg1的值
                  recMsg2.innerHTML = localStorage.getItem('msg2')//获取localStorage中msg2的值
            }
            window.addEventListener('storage',()=>{
                  render()
            })                 

      </script>

</body>
</html>