JavaScript通過更改Web Storage實現頁面間通訊

標籤：-128   取數   cti   事件   es2017   item   values   乾貨   如何   

這個API的作用是，使得網頁可以在瀏覽器端儲存資料。它分成兩類：sessionStorage和localStorage。

sessionStorage儲存的資料用於瀏覽器的一次會話，當會話結束（通常是該視窗關閉），資料被清空；localStorage儲存的資料長期存在，下一次訪問該網站的時候，網頁可以直接讀取以前儲存的資料。除了儲存期限的長短不同，這兩個對象的屬性和方法完全一樣。

它們很像cookie機制的強化版，能夠動用大得多的儲存空間。目前，每個網域名稱的儲存上限視瀏覽器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的儲存空間由頂層網域決定，而其他瀏覽器沒有這個限制。也就是說，在Firefox中，a.example.com和b.example.com共用5MB的儲存空間。另外，與Cookie一樣，它們也受同域限制。某個網頁存入的資料，只有同域下的網頁才能讀取。

好了，簡介完了，下面上乾貨：

// 寫入資料sessionStorage.setItem("key","value");localStorage.setItem("key","value");// 讀取資料var valueSession = sessionStorage.getItem("key");var valueLocal = localStorage.getItem("key");// 刪除資料sessionStorage.removeItem(‘key‘);localStorage.removeItem(‘key‘);// 清除所有資料sessionStorage.clear();localStorage.clear(); 

這是基本的操作方法。

下面講如何頁面間通訊：

1. 在頁面A中寫監聽：

function onStorageChange(e) {     console.log(e);    }window.addEventListener("storage",onStorageChange);

2. 頁面B中進行任何資料操作都會觸發所有同源頁面的storage事件。（值得特別注意的是，該事件不在導致資料變化的當前頁面觸發。如果瀏覽器同時開啟一個網域名稱下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的資料時，其他所有頁面的storage事件會被觸發，而原始頁面並不觸發storage事件。可以通過這種機制，實現多個視窗之間的通訊。所有瀏覽器之中，只有IE瀏覽器除外，它會在所有頁面觸發storage事件。）

 

流程圖片：

a:

 

b:

 

c:

 

JavaScript通過更改Web Storage實現頁面間通訊