如何跨多個瀏覽器窗口創建增量計數器？

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 數組結構為每個瀏覽器窗口指定單獨的變量以進行寫入操作。 當您需要閱讀時，您可以訪問所有單個變量並將它們添加在一起。