如何跨多个浏览器窗口创建增量计数器？

Question

我尝试使用localStorage在多个窗口上同步计数器，并且发现由于localStorage没有锁，所以可能会出现赛车问题。

const root = document.getElementById('root');
let thisCounter = 0;
const interval = setInterval(() => {
  const counter = parseInt(localStorage.getItem('counter') || 0, 10);
  localStorage.setItem('counter', `${counter + 1}`);
  ++thisCounter;
  root.innerHTML = `global: ${counter + 1}, this: ${thisCounter}`;
  if (thisCounter >= 500) {
    clearInterval(interval);
  }
}, 100);

当我打开三个Chrome浏览器窗口(分离了线程)时，看来计数器最终会运行到1498或1497，而不是1500。

​

​

Answer 1

分开读和写操作。

您可以使用JSON数组结构为每个浏览器窗口指定用于写操作的各个变量。当您需要读取时，您可以访问所有单个变量并将它们添加到一起。