标签之间的 Safari 14.1 localStorage 未同步

Question

这是一个适用于 Safari 14.0（和 Chrome、Firefox）但不适用于 Safari 14.1 的最小案例： https://ffvix.csb.app

1. 在 2 个选项卡中打开演示
2. 输入一些文字，然后按“提交”
3. 切换到其他选项卡并按“获取”

应该可以通过 localStorage 在同一域上托管的 2 个选项卡之间同步消息。

演示代码：

    <h1>To localStorage</h1>
    <form id="form">
      <input id="text" type="text" />
      <input type="submit" />
    </form>

    <h1>From localStorage</h1>
    <button id="getout">get</button>
    <p id="out"></p>

    <script type="text/javascript">
      const form = document.getElementById("form");
      const text = document.getElementById("text");
      const out = document.getElementById("out");
      const getout = document.getElementById("getout");

      form.addEventListener("submit", function (e) {
        localStorage.setItem("test", text.value);
        e.preventDefault();
      });

      function getIt() {
        out.textContent = localStorage.getItem("test");
      }
      getIt();
      getout.addEventListener("click", getIt);
      window.addEventListener("storage", getIt);
    </script>

Answer 1

确认：https://twitter.com/jaffathecake/status/1389493762129375232

错误：https://bugs.webkit.org/show_bug.cgi?id=225344

我会在听到修复后更新此内容。

---

从版本 14.1.2 (16611.3.10.1.6) 开始提供修复。使用 https://static-misc-3.glitch.me/localstorage-bug/ 在两个选项卡中进行了测试。状态按预期同步。