LocalStorage

An ES6 module to replace Backbone.sync with browser localStorage-based persistence. Models are given GUIDS and saved into a JSON object. Please see ./dist for ES5 bundles for AMD, CJS, UMD and global consumption.

Usage

The recommended way to consume typhonjs-core-backbone-localstorage is via JSPM / SystemJS via an ES6 project.

Please see this JSPM / SystemJS / ES6 demo: backbone-es6-localstorage-todos

In addition there is a desktop version using Electron here: electron-backbone-es6-localstorage-todos

Create your ES6 collections like so using a getter for localStorage:

const s_LOCAL_STORAGE = new Backbone.LocalStorage("SomeCollection"); // Unique name within your app.

export default class SomeCollection extends Backbone.Collection
{
   get localStorage() { return s_LOCAL_STORAGE; }

   get model() { return SomeModel; }

   // ... everything else is normal.
});

Global usage - Include the global ES6 bundle for Backbone.localStorage after having included Backbone.js:

<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="typhonjs-core-backbone-localstorage.js"></script>

Create your collections like so:

window.SomeCollection = Backbone.Collection.extend({

   localStorage: new Backbone.LocalStorage("SomeCollection"), // Unique name within your app.

   // ... everything else is normal.

});

If needed, you can use the default Backbone.sync (instead of local storage) by passing the origSync option flag to any Backbone function that takes optional parameters, for example:

var myModel = new SomeModel();
myModel.fetch({ origSync: true });
myModel.save({ new: "value" }, { origSync: true });

Please see this global ES5 demo: backbone-es6-localstorage-todos-global-es5

RequireJS

Include RequireJS:

<script type="text/javascript" src="lib/require.js"></script>

RequireJS config:

require.config({
   paths: {
       jquery: "lib/jquery",
       underscore: "lib/underscore",
       backbone: "lib/backbone",
       localstorage: "lib/typhonjs-core-backbone-localstorage"
   }
});

Define your collection as a module:

define("SomeCollection", ["localstorage"], function() {
   var SomeCollection = Backbone.Collection.extend({
        localStorage: new Backbone.LocalStorage("SomeCollection") // Unique name within your app.
   });

   return SomeCollection;
});

Require your collection:

require(["SomeCollection"], function(SomeCollection) {
 // ready to use SomeCollection
});

Please see this RequireJS ES5 demo: backbone-es6-localstorage-todos-requirejs-es5

This code was forked and updated to ES6 from: Backbone.localStorage

Original author: Jerome Gravel-Niquet (many thanks!)