儲存事件

每當在 localStorage 中設定一個值時，將從同一來源的所有其他 windows 上排程 storage 事件。這可用於在不重新載入或與伺服器通訊的情況下同步不同頁面之間的狀態。例如，我們可以將輸入元素的值反映為另一個視窗中的段落文字：

第一視窗

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

第二個視窗

var output = document.createElement('p');
document.body.appendChild(output);

output.textContent = localStorage.getItem('user-value');

window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

筆記

如果通過指令碼修改域名，則 Chrome，Edge 和 Safari 下的活動不會被觸發或捕獲。

第一個視窗

// page url: http://sub.a.com/1.html
document.domain = 'a.com';

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

第二個視窗

// page url: http://sub.a.com/2.html
document.domain = 'a.com';

var output = document.createElement('p');
document.body.appendChild(output);

// Listener will never called under Chrome(53), Edge and Safari(10.0).
window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});