Home Manual Reference Source Repository


Documentation Code Style License

Build Status Dependency Status

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.

For the latest significant changes please see the CHANGELOG.

API documentation can be found in the /docs directory and online here.


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


Include RequireJS:

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

RequireJS 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

To suggest a feature or report a bug: https://github.com/typhonjs/typhonjs-core-backbone-localstorage/issues

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

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

typhonjs-core-backbone-localstorage (c) 2016-present Michael Leahy, TyphonRT Inc.

typhonjs-core-backbone-localstorage may be freely distributed under the MIT license.