javascript - 带有多个选项卡的 localstorage 和 setInterval()

标签 javascript

我们在 localstorage 中存储了一些数据,我们正在使用 window.setInterval() 每分钟定期更新它。在这段时间里,我们不断地读写数据。

是否有可能因为我们正在使用 setInterval() 而发生并发问题,因为多个选项卡可以同时修改 localstorage 中的数据?


编辑 1:详细解释场景:

每个选项卡都根据一个键(比如 xyz)和 setInterval() 将一些数据写入 localstorage,存在于运行的 javascript 中, 不断检查 xyz 关键数据。如果某些数据存在于 key 中,则 setInterval 回调会将其发送到后端。运行相同脚本的每个选项卡将读取 xyz 键并在执行一些逻辑后将一些数据附加到现有值。

我怀疑可能会出现并发问题,比如一个选项卡可能正在读取 xyz 键并将数据添加到本地存储,而另一个选项卡可能同时在做同样的事情。现在两者都会尝试同时发送数据,因此我可能会在后端收到相同的数据 2 次。

最佳答案

Is it possible that concurrency issues can occur because we're using SetInterval() as multiple tabs can modify the data in local storage simultaneously?

这有两个方面:

  1. getItem/setItem(及其等效访问器)是原子的吗?
  2. 执行系列 getItem/setItem 调用的不同选项卡/窗口是否可以交错调用这些调用?

在#1 上,令人惊讶的是,storage specification似乎没有正面解决这个问题。在“注释”中它说:

Note

This specification does not require that the above methods wait until the data has been physically written to disk. Only consistency in what different scripts accessing the same underlying list of key/value pairs see is required.

...这对我来说意味着 getItem/setItem 将是原子的——也就是说,如果两个线程在字面上同时调用getItem/setItem

关于 #2,我认为没有任何保证,不。如果每个选项卡/窗口都有自己的线程,那么理论上这些线程中的两个可以同时进入执行这些更新的代码块。有时,选项卡/窗口共享一个线程,在这种情况下你会很安全,但是......

我会避免在 localStorage 中有很多需要以协调方式更新的不同条目。相反,我会使用带有结构的单个条目。我通常为此使用 JSON。所以获取数据看起来像这样:

let data = JSON.parse(localStorage.getItem("the-data")) || {/*...default structure here...*/};

保存起来是这样的:

localStorage.setItem("the-data", JSON.stringify(data));

所以你可以做

let data = JSON.parse(localStorage.getItem("the-data")) || {/*...default structure here...*/};
// ...modify the various parts of `data`...
localStorage.setItem("the-data", JSON.stringify(data));

然后您将在线程之间进行简单的竞争(最后写入的线程获胜),但存储的数据将是一致的。

关于javascript - 带有多个选项卡的 localstorage 和 setInterval(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56805408/

相关文章:

javascript - 为什么它传递 console.log 作为 Observble subscribe() 函数的参数?

javascript - vim 映射(vnormap),如何使用

javascript - 右键单击显示 Bootstrap 模式 - 多个模式

javascript - 单击功能不适用于 document.getElementsByClassName

javascript - 添加另一个元素到模型列表 [odoo-8] pos javascript

javascript - 解析错误 400(错误请求){代码 : 201, 消息: "missing user password"}

javascript - 如何使用我创建的函数验证表单

javascript - 在 ReactJS 中渲染数据

javascript - mongo聚合计算字段中的唯一元素

javascript - CheckBoxes React Native Map函数返回错误: Too many re-renders. React限制渲染数量以防止无限循环