存储事件

每当在 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;
  }
});