同一瀏覽器多個標籤頁之間的通信（一）——localStorage

一、localStorage 
（1）localStorage是什麼？ 
localStorage對象在修訂過的HTML5規範中作爲持久保存在客戶端數據的方案取代了globalStorage，是Storage的實例。 
注意：要訪問一個localStorage對象，頁面必須來自同一個域名（子域名無效），使用同一種協議，在同一個端口上。相當於globalStorage[localhost.host]。 
（2）localStorage怎麼用？ 
localStorage作爲Storage的實例，可以使用Storage實例的方法。 
常見操作：

        localStorage.setItem('name','lwf');
        localStorage.age=21;//注意後填加的放在localStorage的前面

        console.log(localStorage.getItem('name'));//lwf
        console.log(localStorage.age);//21
        console.log(localStorage);//Storage {age: "21", name: "lwf", length: 2}
        console.log(localStorage.key(0));//age,注意index從0開始


        console.log(localStorage.length);//2

        localStorage.removeItem('name');
        console.log(localStorage.getItem('name'));//null

        localStorage.clear();
        console.log(localStorage);//Storage {length: 0}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

（3）怎麼使用localStorage實現多標籤之間的通信？ 
index.html：

 <input type="text">
    <button id="btn">Click</button>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById("btn");
            var oInput=document.getElementsByTagName("input")[0];
            oBtn.onclick=function(){
                var val=oInput.value;
                localStorage.setItem("value",val);
            }
        }
    </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

test.html:

<script>
        window.addEventListener("storage",function(event){
            console.log("value is"+localStorage.getItem("value"));
            console.log("key is"+event.newValue);
        },false);    
    </script>

• 1
• 2
• 3
• 4
• 5
• 6

注意：只能實現同一瀏覽器相同域名、相同協議、相同端口下的多個標籤頁之間的通信。不同瀏覽器沒有該效果。 
效果： 
 
（4）localStorage可以實現同一瀏覽器多個標籤頁之間通信的原理 
localStorage是Storage對象的實例。對Storage對象進行任何修改，都會在文檔上觸發storage事件。當通過屬性或者setItem()方法保存數據，使用delete操作符或removeItem()刪除數據，或者調用clear()方法時，都會發生該事件。這個事件的event對象有以下屬性：

• domin：發生變化的存儲空間的域名；
• key：設置或者刪除的鍵名；
• newValue：如果是設置值，則爲新值；如果是刪除值，則是null；
• oldValue：鍵被更改之前的值；

注意：IE8和Firefox只實現了domin屬性。 

轉自：https://blog.csdn.net/liwenfei123/article/details/79996161