寫在前面
本文首發於公衆號：符合預期的CoyPan
上週在看關於react-redux的一個在線ppt時，偶然發現了一個現象：
如果我開兩個瀏覽器tab，同時訪問這個頁面，我在其中一個頁面切換ppt，另外一個頁面會跟着變化。鏈接在這裏：
https://blog.isquaredsoftware...
效果如下：
研究了一下，這個效果其實就是用localStorage來實現的。
localStorage基本知識點
localStorage, 是一個用來做本地持久化存儲的Web Api。 localStorage以鍵值對的形式存儲數據。用法很簡單：
// 設置
localStorage.setItem('myCat', 'Tom');
// 獲取
let cat = localStorage.getItem('myCat');
// 移除
localStorage.removeItem('myCat');
// 移除所有
localStorage.clear();有幾個點需要注意：
1、localStorage是以『源(origin)』爲維度進行存儲的。也就是說，跨域訪問其他站點的localStorage是行不通的。
2、localStorage是以字符串的形式保存數據的。
3、對於每一個域，localStorage最多允許存儲幾M數量級的數據(具體數字因瀏覽器而異)。
localStorage可以用來做什麼：
存儲登錄token，用戶信息等數據；本地持久化保存業務數據；保存代碼，以提高網站性能。等等等等…還有本文所要介紹的頁面同步。
監聽LocalStorage變化
localStorage被改變時(從無到有，從有到無，值改變)，會觸發一個storage事件。我們可以在window上監聽到這個事件。
window.addEventListener('storage', () => {
...
});
window.onstorage = () => {
...
};這裏需要注意的是，在改變localStorage的當前頁面，是無法監聽到storage事件的。如果我同時打開了多個同源的頁面: A頁面、B頁面、C頁面，當在A頁面中修改localstorage時，B頁面和C頁面中都可以監聽到storage事件，而A頁面是不會觸發storage事件的。
一個storage事件的實例如下：
其中比較關鍵的是key，newValue，oldValue這幾個值。key表示的是被改變的localStorage的key值，newValue是改變後最新的值，oldValue是舊的值。
實現兩個頁面同步的效果
瞭解了上面的知識點，就可以解釋本文開頭所提到的網頁是如何實現多頁面同步的了。來實現一個簡單的。
<html>
<head>
<style>
.count {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div class="count">0</div>
<button>click</button>
<script>
window.onload = function () {
var btnEl = document.querySelector('button');
var countEl = document.querySelector('.count');
btnEl.addEventListener('click', function () {
var curCount = Number(localStorage.getItem('count'));
var newCount = curCount + 1;
countEl.innerHTML = newCount;
localStorage.setItem('count', newCount);
});
window.addEventListener('storage', function (e) {
var newValue = e.newValue;
countEl.innerHTML = newValue;
});
}
</script>
</body>
</html>效果如下：
寫在後面
在平時的業務開發中，localStorage使用的頻率也不低，但確實是不知道還可以這麼用。以後有遇到頁面同步的需求時，localStorage也可以作爲一個選項了。符合預期。
