原理：
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>