Question

I’m making a Backbone app now and using a backbone.localstorage plugin to persist the data. My app has some sortable items so I hope every time I sort the items, the data order in localStorage will also change. And next time I refresh the whole page, the page will be rendered by the sorted data. But it seems that backbone.localstorage will persist the data in its creation order. Could someone give me some ideas on this?

Answer 1

If you want your models to appear in an explicit order then include a comparator in your collection and, possibly, a position number in each model.

Local storage is:

a means through which string key/value pairs can be securely stored and later retrieved for use.

Note the key/value pairs, that means that you’re dealing with, more or less, a big hash table and those are usually unordered. Furthermore, from the fine specification:

The order of keys is user-agent defined, but must be consistent within an object so long as the number of keys doesn’t change. (Thus, adding or removing a key may change the order of the keys, but merely changing the value of an existing key must not.)

So there is no particular order inside local storage. If you want a specific order, you have to arrange for it yourself.

In your case, you’d probably have a position or index property in your models that would behave like an array index; then, in your collection:

comparator: function(m) { return m.get('position') } // or 'index'

You could also use a two argument comparator function:

comparator: function(a, b) {
    a = a.get('position');
    b = b.get('position');
    if(a < b)
        return -1;
    else if(a > b)
        return 1;
    return 0;
}

You’d have to maintain the position indexes as you move models around but that shouldn’t be terribly difficult. You could also order the data by position after pulling it out of local storage but before putting it in your collection and then assign position values while writing the models into local storage.