Question

I’ve been tinkering with Backbone.js for some time now. I’ve been using localStorage for storing most of my app data. I was wondering if would be possible for me to export my collection to a plain text and have it imported back again. i.e I want to create a backup kind of feature where when the data is exported, an HTML textbox is displayed with the ‘plain text’ version of my collection and when I need to import back the data, I just paste it into an empty textbox and it re-creates the collection.

Is this possible, any tips on how to achieve this? I was thinking about exporting it to JSON format and importing it back. Is that feasible?

p.s. I know there is no code here, but any idea would be much welcomed.

Answer 1

You can use toJSON to serialize the collection. (Actually Backbone.js mentions this as a primary use for collection.toJSON()). Use JSON.stringify to convert the JSON object to a string.

var json = myCollection.toJSON();
var serializedString = JSON.stringify(json);

To restore the collection, reverse the steps:

1. JSON.parse to convert the raw string to a JSON object
2. collection.reset to convert the JSON object to a collection

Here’s a working example.

// setup test collection
var collection = new Backbone.Collection();
collection.add(new Backbone.Model({ hello: "world" }));

// serialize it to a string
var json = collection.toJSON();
var serialized = JSON.stringify(json);
console.log(serialized);

// get it back
var json2 = JSON.parse(serialized);
var collection2 = new Backbone.Collection();
var restored = collection2.reset(json2);

// check that it worked
console.log(restored.at(0).get("hello"));

​