import LocalStorage from 'typhonjs-core-backbone-localstorage/src/LocalStorage.js'
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!)
Constructor Summary
Public Constructor | ||
public |
constructor(name: string, serializer: object) Our Store is represented by a single JS object in |
Member Summary
Public Members | ||
public |
A unique name to use as a base ID for local storage. |
|
public |
A array of IDs being tracked. |
|
public |
An object that is compatible with |
Method Summary
Public Methods | ||
public |
clear() Clear |
|
public |
Add a model, giving it a (hopefully)-unique GUID, if it doesn't already have an id of it's own. |
|
public |
Delete a model from |
|
public |
Retrieve a model from |
|
public |
Return the array of all models currently in storage. |
|
public |
localStorage(): Storage Returns the Browser |
|
public |
save() Save the current state of the |
|
public |
Provides the local storage sync method. |
|
public |
Update a model in localStorage and potentially add the model ID to |
Public Constructors
Public Members
Public Methods
public clear() source
Clear localStorage
for specific collection. Invoke fetch
with option { reset: true }
afterward.
public create(model: object): * source
Add a model, giving it a (hopefully)-unique GUID, if it doesn't already have an id of it's own.
Params:
Name | Type | Attribute | Description |
model | object | An object hash / model to create. |
Return:
* |
public destroy(model: object): * source
Delete a model from this.data
, returning it.
Params:
Name | Type | Attribute | Description |
model | object | An object hash with |
Return:
* |
public find(model: object): number source
Retrieve a model from this.data
by id.
Params:
Name | Type | Attribute | Description |
model | object | An object hash with |