Skip to content
An extension to Backbone providing localStorage caching for Backbone sync operations
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Backbone Caching Sync

An extension to Backbone providing localStorage caching for Backbone sync operations


Backbone by default persists models/collections to the server by making RESTful JSON requests. It also makes it easy to implement alternative storage layers by simply overriding the sync function in your models/collections. Several alternative implementations exist for instance using MongoDB or XMPP PubSub.

Backbone.cachingSync does not provide a new storage. It merely caches sync operations in the browser's localStorage allowing you to have a readily available cache while still using the sync of your choice.


In order to decorate your original sync function with caching capabilities, you simply wrap it in an instance of Backbone.cachingSync. So for example, assuming you had a collection MyCollection using the default Backbone.sync() you would:

var MyModel = Backbone.Model.extend({

    sync: Backbone.cachingSync(Backbone.sync, 'mystuff'),


var MyCollection = Backbone.Collection.extend({

    model: MyModel,
    sync: Backbone.cachingSync(Backbone.sync, 'mystuff'),

Backbone.cachingSync takes as parameters wrapped the sync function you are decorating, and optionally ns a namespace to be used when composing localStorage keys for the cache and ttl the time-to-live of your cache in minutes (defaults to infinity).

Note that in order for it to work, your original sync function is expected to return for every operation a jQuery promise. The default Backbone sync is doing that already since it relies on jQuery.ajax().


Backbone.cachingSync behaves as follows for the CRUD sync operations:

  • On create it will resolve as soon as the server-side sync resolves caching the model to localStorage.
  • On read if the model/collection already exists in the cache will resolve immediately returning the cached version. When the server-side sync resolves new data will be set on the model(s) triggering change events if necessary.
  • On update it will immediately update the cache and resolve when the server-side resolves. If the server-side update fails it will revert the cache.
  • On delete it will immediately remove the model from the cache and resolve when the server-side resolves. If the server-side deletion fails it will restore the model in the cache.


Backbone.cachingSync supports AMD loaders such as require.js. Since Underscore and Backbone do not have built-in support for AMD, you will need to provide a shim. For instance in your require.config you should have:

shim: {
    backbone: {
        deps: ['underscore', 'jquery'],
        exports: "Backbone"

    underscore: {
        exports: '_'


Backbone.cachingSync depends on burry.js, a memcache-like localStorage cache, and jQuery.


Backbone.cachingSync is Copyright (C) 2012 Yiorgis Gozadinos, Crypho AS It is distributed under the MIT license.

You can’t perform that action at this time.