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

Question

just a very short question on using Backbone.js with LocalStorage:

I'm storing a list of things (Backbone collection) in LocalStorage. When my website is open in multiple browser windows / tabs and the user in both windows adds something to the list, one window's changes will overwrite the changes made in the other window.

If you want to try for yourself, just use the example Backbone.js Todo app:

1. Open http://backbonejs.org/examples/todos/index.html in two browser tabs
2. Add an item 'item1' in the first tab and 'item2' in the second tab
3. Refresh both tabs: 'item1' will disappear and you'll be left with 'item2' only

Any suggestions how to prevent this from happening, any standard way to deal with this?

Thxx

Answer 1

The issue is well-known concurrency lost updates problem, see Lost update in Concurrency control?. Just for your understanding I might propose the following quick and dirty fix, file 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));
}

For the latest Github version of Backbone localStorage, I think this should look like this:

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(","));
}

Answer 2

Yaroslav's comment about checking for changes before persisting new ones is one solution but my suggestion would be different. Remember that localStorage is capable of firing events when it performs actions that change the data it holds. Bind to those events and have each tab listen for those changes and view re-render after it happens.

Then, when I make deletions or additions in one tab and move over to the next, it will get an event and change to reflect what happened in the other tab. There won't be weird discrepancies in what I'm seeing tab to tab.

You will want to give some thought to making sure that I don't lose something I was in the middle of adding (say I start typing a new entry for my to-do list), switch to another tab and delete something, and then come back I want to see the entry disappear but my partially typed new item should still be available for me.