javascript - 从多个选项卡同步写入 localStorage 时不一致

Question

tl;dr 我注意到在同一时间写入 localStorage 时浏览器之间的行为不一致。

要求:即使打开了多个选项卡，特定操作(刷新 OAuth session 的 POST 请求)也应该只执行一次。哪个选项卡执行操作并不重要。刷新的时间点源自 session 的到期时间，并且在所有选项卡中都完全相同。

方法:所有标签生成一个随机数，存储它并写入localStorage。然后他们读取 localStorage，如果两者相同，则允许选项卡执行操作。

let tab = Math.random();
localStorage.setItem('tab',tab);
if(JSON.parse(localStorage.getItem('tab')) === tab) {
    console.log('aquired lock');
} else {
    console.log('did not aquire lock');
}

JSFiddle - 为了测试您需要在两个选项卡中打开 fiddle 的行为，然后在两个选项卡中按运行。计算超时以在下一个完整的 10 秒执行。 (第二个 0、10、20、30、40、50)

预期:选项卡 A 和 B 将 localStorage['tab'] 设置为随机值，在检索该值时只有 一个 选项卡检索与其随机生成的值相同的值因此可以执行该操作。

结果:A 和 B 仍然检索它们自己生成的值。

我添加了一些超时让内存灰尘安顿下来:

let tab = Math.random();
localStorage.setItem('tab',tab);
setTimeout(function(){
    if(JSON.parse(localStorage.getItem('tab')) === tab) {
        console.log('aquired lock');
    } else {
        console.log('did not aquire lock');
    }
}, 1000);

JSFiddle

结果 (Firefox): 选项卡 A 检索选项卡 B 生成的值，反之亦然。因此不允许任何选项卡执行该操作。

这是我有点害怕的地方。我检查了完全相同的控制台时间戳和开发工具中的 localStorage，它在不同的选项卡中显示了不同的值。 (即使重新加载选项卡也确实在不同的选项卡中显示了不同的值。)

如果稍后写入值(例如通过控制台)，所有选项卡都会相应地更新值。

结果(Chrome、Edge):只有一个选项卡按预期记录 aquired lock。

---

是否有任何解释为什么 Firefox 可以在每个选项卡的 localStorage 中有不同的值？

---

我已经通过订阅 StorageEvent 解决了这个问题.具有最小随机数的选项卡将执行该操作。

使用的浏览器:

• Firefox 68.0 和 60.8.0esr(均为 64 位)
• Chrome 75.0.3770.142(64 位)
• 边缘 44.18362.1.0

Answer 1

这是处理共享内存时相当标准的情况。出于性能原因，允许访问共享内存的每个线程保留自己的副本(“缓存”)，直到/除非发生某种同步，此时必须将本地副本与共享副本协调。

旧存储规范 talked about在每个存储操作中获取一个存储互斥量:

Whenever the properties of a localStorage attribute's Storage object are to be examined, returned, set, or deleted, whether as part of a direct property access, when checking for the presence of a property, during property enumeration, when determining the number of properties present, or as part of the execution of any of the methods or attributes defined on the Storage interface, the user agent must first obtain the storage mutex.

但该规范已被包含在 WHAT-WG“HTML”规范(比 HTML 多得多)的§11(“Web 存储”)中，并且每个操作都必须获取存储互斥锁的要求已被取消下降。 (我不知道为什么，但我猜是出于性能原因。)当前规范 says :

Warning: The localStorage attribute provides access to shared state. This specification does not define the interaction with other browsing contexts in a multiprocess user agent, and authors are encouraged to assume that there is no locking mechanism.

该规范也没有讨论跨浏览上下文的存储同步。这意味着实现可以自由优化。

用 modified version of your script 查看它，看起来 Firefox 通过为每个浏览上下文(选项卡)拥有本地存储的本地副本来优化它似乎基于 storage 更新来自其他上下文(选项卡)的事件。但是，如果两个选项卡都在 storage 之前设置值(为另一个选项卡生成 storage 事件)来自另一个选项卡的事件被处理，他们都得到并处理 storage来自另一个的事件，更新为该值(另一个选项卡的值)，导致您描述的行为。

旁注:写入持久存储的操作(如果您在完成所有这些操作后打开它，第三个选项卡会看到什么)似乎也是异步的，并且两个选项卡正在竞争看哪个最后写入(a最后一个写入其本地副本的比赛并不总是获胜!)。

当线程之间只有松散的同步并且没有锁定语义时，这实际上是线程之间共享内存所发生情况的大规模版本，规范不再需要锁定语义。

Chrome 似乎在进行锁定或类似操作。