一、cookie 、localStorage 、sessionStorage 、vuex 比較
cookie 4K 有時效性 可服務器傳遞
cookie是由服務器產生，存儲在客戶端的一段信息，在同源（即：協議、主機地址、端口號一致）的http請求頭上攜帶（即使不需要）
在瀏覽器和服務器之前來回傳遞，用來處理客戶端和服務器通信。
若設置了過期時間，則在過期時間之前，一直存儲在瀏覽器中，即使窗口或瀏覽器關閉也有效。（保存在硬盤）
若不設置過期時間，窗口或瀏覽器關閉立即失效。（保存在內存）
HTTP這一列，如果在setCookie的時候，把HTTPOnly設置為true，這里就會打鈎，那么cookies就只能被server服務器端來讀取或是修改，客戶端沒有權限進行讀取和修改。
例如，我們在進行身份驗證的時候，就可以使用這個。
Secure：與安全相關，如果設置了，那么請求只能是來自HTTP加密請求。
HTML5 Web Storage 5M 僅本地保存，不會自動發送服務器 隱私模式不可讀取、不可被爬蟲抓取
WebStorage提供兩種類型的API：localStorage和sessionStorage，兩者的區別看名字就有大概了解
localStorage在本地永久性存儲數據，除非顯式將其刪除或清空，sessionStorage存儲的數據只在會話期間有效，關閉瀏覽器則自動刪除。
兩個對象都有共同的API用法，存儲對象需要JSON.stringify、JSON.parse
- length:唯一的屬性，只讀，用來獲取storage內的鍵值對數量。
- key：根據index獲取storage的鍵名
- getItem：根據key獲取storage內的對應value
- setItem：為storage內添加鍵值對
- removeItem：根據鍵名，刪除鍵值對
- clear：清空storage對象
localStorage 永久存儲（除手動刪除） 保存在硬盤 兼容IE8+
打開同域的新頁面也能訪問到，在瀏覽器打開關閉期間都可以訪問,存儲在文件的C盤。
地址：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb
sessionStorage 臨時存儲 關閉頁面即清空（刷新不清除）
頁面會話在瀏覽器打開期間一直保持，並且重新加載（F5刷新）或恢復頁面（即當前網址變為其他又還原）仍會保持原來的頁面會話，不會消除存儲數據。
VUEX 保存在內存 刷新頁面清除
vuex是狀態管理機制，一個組件的數據變化會映射到使用此數據的其他組件，即一個組件的數據變化，另一個組件也能相應到
vuex用於組件間傳值，cookie、localStorage、sessionStorage用於頁面間傳值。刷新頁面vuex存儲的值丟失，其他三種不變；
不變的數據可用localStorage存儲，更新的數據用vuex存儲，與服務器溝通的數據用cookie存儲。
二、對於不同窗口，不同標簽頁，不同瀏覽器下的sessionStorage、localStorag、cookie的狀態
1.不同瀏覽器無法共享，即：在Chrome上存儲的數據在FireFox上獲取不到
2.相同瀏覽器下的不同窗口或同一窗口不同標簽頁共享cookie、localStorag
3.sessionStorage在任何情況下都不共享
在當前頁面通過a鏈接或window.location、window.open等打開的新頁面可以訪問sessionStorage，但是不能共享（同步）。
故同一個窗口，不同標簽頁之間，相同域名下的sessionStorage可能不一樣的。如下圖：
但是如果主動打開一個同源的新窗口或新標簽頁，原先存儲的sessionStorage並不存在
也就是說，sessionStorage僅限當前標簽頁或者當前標簽頁打開的新標簽頁，通過其它方式新開的窗口或標簽不認為是同一個sessionStorage。
這是因為sessionStorage是頁面級的，只有全部關閉當前頁和從其內部打開的所有頁面，或者直接關閉瀏覽器，才可以消除當前頁的sessionStorage數據。
三、Web Storage API 的storage 事件
對 Storage 對象進行修改，觸發 storage 事件。可以對storage事件進行監聽，僅支持同源，不支持跨域
且storage 事件只會發送給同源、而且處於打開狀態的其它頁面，而不會發送給觸發改變的頁面本身及處於關閉狀態的頁面。
使用：
A 頁面 ：localStorage.setItem('key1', 'vakue1')
B頁面：window.addEventListener("storage", function (e) {
e的參數值：
}); 
A頁面寫入特定數據觸發B頁面的storage，頁面B響應之后可以再寫入數據，通知頁面A處理結果，以實現頁面通信。
用例：諸如微博應用的“換膚”功能，如果能夠實現打開的多個窗口同時更換皮膚，勢必能夠提高用戶體驗。
四：postMessage
產品經理總是抱怨打開了多個窗口怎么就不能實現聯動？
在一個窗口登錄了其它窗口怎么就非得刷新才能使用一些功能？
這些統統可以通過跨頁面通信解決。
postMessage(data,origin)方法允許來自不同源的腳本采用異步方式進行通信，可以實現跨文本檔、多窗口、跨域消息傳遞。
發送：otherWindow.postMessage(message、targetOrigin、[transfer]);//調用postMessage方法的window對象是指要接受消息的那一個window對象
監聽：message事件 window.addEventListener('message'，function(event){alert(event.data)})
假設在a.html里嵌套個<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在這兩個頁面里互相通信
a.com/a.html
window.onload = function() {
window.addEventListener("message", function(event) {
alert(event.data);
});
// window.frames[0].postMessage("b data", "http://www.b.com/b.html"); //調用postMessage方法的window對象是指要接收消息的那一個window對象
}
b.com/b.html
window.onload = function() {
// window.addEventListener("message", function(event) {
// alert(event.data);
// });
window.parent.postMessage("a需要的數據", "http://www.a.com/a.html");
}
對比：
postMessage是從a窗口發送信息到b窗口，b窗口監聽到消息后做出回應；而localStorage是在a窗口改變某一個存儲值，b窗口監聽到了存儲值的變化，然后獲取該值，進而完成通信的同樣的效果。
https://ninghao.net/video/1220