How to integrate backbone.sync with jstorage?

I'm a newbie javascript developer (first post here!) and been recently trying to play with backbone.sync. I've been reading through the todo example and notice that it uses backbone-localstorage. My feeling is that backbone-localstorage was just a quick implementation that the author used for demo purposes. I also noticed that the keys are randomly generated, whereas I would like something that would allow me to name my own key values.

I've been looking at jstorage (www.jstorage.info), and would really appreciate some pointers (preferably with code samples) on how to integrate it with backbone.js. I imagine backbone.sync would need to be overriden somehow as is done in backbone-localstorage.

A开发者_如何学Clternatively, what localStorage plugin/wrapper would you recommend, and how would it integrate with backbone?

Thanks for help in advance.

---

My feeling is that backbone-localstorage was just a quick implementation that the author used for demo purposes.

Exactly right. I'd say that the implementation is fine for most things, but what support you can get for it is probably minimal.

I also noticed that the keys are randomly generated, whereas I would like something that would allow me to name my own key values.

This isn't really correct. I assume you are referring to this:

// Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
// have an id of it's own.
create: function(model) {
    if (!model.id) model.id = model.attributes.id = guid();
    this.data[model.id] = model;
   this.save();
   return model;
}

Here, what's happening is that when a create is called on a model, it tries to determine if an id has been set on the model, and if no such id is provided, then the guid function is used to build one. This isn't setting a key randomly, it's fulfilling the requirement that every saved model should have an id (by assigining a random one).

Modifying the backbone-localstorage.js code should be fairly trivial. Let's look at the store constructor as an example

Before:
var Store = function(name) {
    this.name = name;
    var store = localStorage.getItem(this.name);
    this.data = (store && JSON.parse(store)) || {};
};

The only thing we need to update here is the call to localStorage:

After:
var Store = function(name) {
    this.name = name;
    //Notice here, that jStorage gives us the option to define a default.
    var store = $.jStorage.get(this.name, {}); 
    this.data = store;
};

Similarly simple is the save function:

Before:
save: function() {
    localStorage.setItem(this.name, JSON.stringify(this.data));
}

again, simply update the call to localStorage:

After:
save: function() {
    $.jStorage.set(this.name, this.data);
}

Update: jStorage handles all the JSON.stringify, and JSON.parse for you, so I've updated the above code to reflect that.

Easy peasy, right!

Anyways, this is a great exercise, and I wish you the best of luck. I hope that I've been able to help you out.

P.s. One thing that bothers me about the localStorage plugin is that it uses model.attributes.xxx, where it's better to use model.get("xxx"). This way, if they ever change the internals of model change, your code won't break.

P.p.s. as far as how to generate guids, and weather a random guid is appropriate for you, depends upon your domain. With the TODO example, there is no backing database to sync with, so any old guid would do the trick, but in many other cases, you may be using html5 storage to create an offline version of your app, so id's need to be compatable with the db. In these cases, using a random guid is probably not that great an idea, but the one provided by the backbone-localstorage plugin is designed so that it isn't likely to collide with your db's actual id's, so it's not _that bad. There isn't really a right answer here, so do what makes sense for your domain.

---

You should probably look first at the local storage plugin that backbone.js provides. There are plenty of code samples that should give you an idea of how you would swap in jstorage as the underlying storage mechanism. See it here:

backbone-localstorage.js