具有多个浏览器选项卡/窗口的骨干网.js和本地存储覆盖数据

backbone.js and local storage with multiple browser tabs / windows overwrites data

本文关键字：js 骨干网 数据 存储覆盖 窗口 浏览器 选项      更新时间：2023-09-26

只是关于将Backbone.js与LocalStorage一起使用的一个非常简短的问题：

我正在LocalStorage中存储一个事物列表（Backbone collection）。当我的网站在多个浏览器窗口/选项卡中打开并且两个窗口中的用户向列表中添加内容时，一个窗口的更改将覆盖在另一个窗口中所做的更改。

如果您想自己尝试，只需使用示例 Backbone.js Todo 应用程序：

  1. 在两个浏览器选项卡中打开 http://backbonejs.org/examples/todos/index.html
    2. 在第一个选项卡中添加项目
  2. "item1"，在第二个选项卡中添加项目"item2"
  3. 刷新两个标签页："item1"将消失，只剩下"item2"

任何建议如何防止这种情况发生，有什么标准方法来解决这个问题吗？

谢谢

问题是众所周知的并发丢失更新问题，请参阅并发控制中的更新丢失？。只是为了您的理解，我可能会提出以下快速而肮脏的修复程序，文件backbone-localstorage.js，Store.prototype.save：

save: function() {
    // reread data right before writing
    var store = localStorage.getItem(this.name);
    var data = (store && JSON.parse(store)) || {};
    // we may choose what is overwritten with what here
    _.extend(this.data, data);
    localStorage.setItem(this.name, JSON.stringify(this.data));
}

对于最新的Github版本的Backbone localStorage，我认为这应该是这样的：

save: function() {
  var store = this.localStorage().getItem(this.name);
  var records = (store && store.split(",")) || [];
  var all = _.union(records, this.records);
  this.localStorage().setItem(this.name, all.join(","));
}

您可能希望改用会话存储。请参阅 http://en.wikipedia.org/wiki/Web_storage#Local_and_session_storage。

雅罗斯拉夫关于在保留新更改之前检查更改的评论是一种解决方案，但我的建议会有所不同。请记住，localStorage 能够在执行更改其所持有数据的操作时触发事件。绑定到这些事件，并让每个选项卡侦听这些更改，并在发生更改后查看重新呈现。

然后，当我在一个选项卡中进行删除或添加并移动到下一个选项卡时，它将获得一个事件并进行更改以反映另一个选项卡中发生的情况。我看到的标签之间不会有奇怪的差异。

您需要考虑一下，以确保我不会丢失正在添加的内容（假设我开始为我的待办事项列表键入一个新条目），切换到另一个选项卡并删除某些内容，然后返回我想看到该条目消失，但我部分键入的新项目应该仍然可供我使用。

相关文章：