Skip to content

typhonjs-backbone/typhonjs-core-backbone-localstorage

Repository files navigation

typhonjs-core-backbone-localstorage

Documentation Code Style License Gitter

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 online here.

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


To suggest a feature or report a bug: https://github.com/typhonjs-backbone/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 MPL v2.0 license.

About

Provides a sync adapter using browser localStorage for backbone-es6.

Resources

License

Stars

Watchers

Forks

Packages

No packages published