Saving a model in local storage

Question

I'm using Jerome's localStorage adapter with Backbone and it works great for collections.

But, now I have a single model that I need to save. So in my model I set:

localStorage: new Store("msg")

I then do my saves and fetch. My problem is that everytime I do a refresh and initialize my app a new representation of my model is added to localStorage, see below.

What am I doing wrong?

window.localStorage.msg = {
  // Created after first run
  "1de5770c-1431-3b15-539b-695cedf3a415":{
    "title":"First run",
    "id":"1de5770c-1431-3b15-539b-695cedf3a415"
  },
  // Created after second run
  "26c1fdb7-5803-a61f-ca12-2701dba9a09e":{
    "0":{
      "title":"First run",
      "id":"1de5770c-1431-3b15-539b-695cedf3a415"
    },
      "title":"Second run",
      "id":"26c1fdb7-5803-a61f-ca12-2701dba9a09e"
    }
  }

Answer 1

I ran into same issue. Maybe you have something similar to this

var Settings = Backbone.Model.extend({
  localStorage: new Store("Settings"),
  defaults: { a: 1 }
});

var s = new Settings;
s.fetch();

I changed to

var s = new Settings({ id: 1 });

localStorage adapter check for id like

 case "read":    resp = model.id ? store.find(model) : store.findAll(); break;

so 0 or "" for id wont work and it will return all models in one

Answer 2

I'm new to backbone.js too, but it looks like the persistence model is analogous to database tables. That is to say, it's designed to create/delete/read records from a table. The localStorage adapter does the same, so what you are doing there is creating a Msg "table" in localStorage, and creating a new Msg "record" each time, and the adapter gives each new Msg a unique id.

If you just have one object, it's probably easier to just use localStorage directly. The API is really straight forward:

localStorage.setItem("key","value");

Keep in mind that localStorage only deals with key/value pairs as strings, so you'd need to convert to/from string format.

Take a look a this question for more on doing that:

Storing Objects in HTML5 localStorage