# backbone.localStorage.js

- Jump To … +
  examples/backbone.localStorage.js examples/todos/todos.js

- # backbone.localStorage.js

- §

      /**
       * Backbone localStorage Adapter
       * Version 1.1.0
       *
       * https://github.com/jeromegn/Backbone.localStorage
       */
      (function (root, factory) {
         if (typeof define === "function" && define.amd) {

- §

  AMD. Register as an anonymous module.

            define(["underscore","backbone"], function(_, Backbone) {

- §

  Use global variables if the locals are undefined.

              return factory(_ || root._, Backbone || root.Backbone);
            });
         } else {

- §

  RequireJS isn’t being used. Assume underscore and backbone are loaded in script tags

            factory(_, Backbone);
         }
      }(this, function(_, Backbone) {

- §

  A simple module to replace `Backbone.sync` with localStorage-based persistence. Models are given GUIDS, and saved into a JSON object. Simple as that.

- §

  Hold reference to Underscore.js and Backbone.js in the closure in order to make things work even if they are removed from the global namespace

- §

  Generate four random hex digits.

      function S4() {
         return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
      };

- §

  Generate a pseudo-GUID by concatenating random hexadecimal.

      function guid() {
         return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
      };

- §

  Our Store is represented by a single JS object in localStorage. Create it with a meaningful name, like the name you’d give a table. window.Store is deprecated, use Backbone.LocalStorage instead

      Backbone.LocalStorage = window.Store = function(name) {
        this.name = name;
        var store = this.localStorage().getItem(this.name);
        this.records = (store && store.split(",")) || [];
      };

      _.extend(Backbone.LocalStorage.prototype, {

- §

  Save the current state of the Store to localStorage.

        save: function() {
          this.localStorage().setItem(this.name, this.records.join(","));
        },

- §

  Add a model, giving it a (hopefully)-unique GUID, if it doesn’t already have an id of it’s own.

        create: function(model) {
          if (!model.id) {
            model.id = guid();
            model.set(model.idAttribute, model.id);
          }
          this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
          this.records.push(model.id.toString());
          this.save();
          return this.find(model);
        },

- §

  Update a model by replacing its copy in `this.data`.

        update: function(model) {
          this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
          if (!_.include(this.records, model.id.toString()))
            this.records.push(model.id.toString()); this.save();
          return this.find(model);
        },

- §

  Retrieve a model from `this.data` by id.

        find: function(model) {
          return this.jsonData(this.localStorage().getItem(this.name+"-"+model.id));
        },

- §

  Return the array of all models currently in storage.

        findAll: function() {
          return _(this.records).chain()
            .map(function(id){
              return this.jsonData(this.localStorage().getItem(this.name+"-"+id));
            }, this)
            .compact()
            .value();
        },

- §

  Delete a model from `this.data`, returning it.

        destroy: function(model) {
          if (model.isNew())
            return false
          this.localStorage().removeItem(this.name+"-"+model.id);
          this.records = _.reject(this.records, function(id){
            return id === model.id.toString();
          });
          this.save();
          return model;
        },

        localStorage: function() {
          return localStorage;
        },

- §

  fix for “illegal access” error on Android when JSON.parse is passed null

        jsonData: function (data) {
            return data && JSON.parse(data);
        }

      });

- §

  localSync delegate to the model or collection’s localStorage property, which should be an instance of `Store`. window.Store.sync and Backbone.localSync is deprecated, use Backbone.LocalStorage.sync instead

      Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = function(method, model, options) {
        var store = model.localStorage || model.collection.localStorage;

        var resp, errorMessage, syncDfd = $.Deferred && $.Deferred(); //If $ is having Deferred - use it.

        try {

          switch (method) {
            case "read":
              resp = model.id != undefined ? store.find(model) : store.findAll();
              break;
            case "create":
              resp = store.create(model);
              break;
            case "update":
              resp = store.update(model);
              break;
            case "delete":
              resp = store.destroy(model);
              break;
          }

        } catch(error) {
          if (error.code === DOMException.QUOTA_EXCEEDED_ERR && window.localStorage.length === 0)
            errorMessage = "Private browsing is unsupported";
          else
            errorMessage = error.message;
        }

        if (resp) {
          model.trigger("sync", model, resp, options);
          if (options && options.success)
            options.success(resp);
          if (syncDfd)
            syncDfd.resolve(resp);

        } else {
          errorMessage = errorMessage ? errorMessage
                                      : "Record Not Found";

          if (options && options.error)
            options.error(errorMessage);
          if (syncDfd)
            syncDfd.reject(errorMessage);
        }

- §

  add compatibility with $.ajax always execute callback for success and error

        if (options && options.complete) options.complete(resp);

        return syncDfd && syncDfd.promise();
      };

      Backbone.ajaxSync = Backbone.sync;

      Backbone.getSyncMethod = function(model) {
        if(model.localStorage || (model.collection && model.collection.localStorage)) {
          return Backbone.localSync;
        }

        return Backbone.ajaxSync;
      };

- §

  Override ‘Backbone.sync’ to default to localSync, the original ‘Backbone.sync’ is still available in ‘Backbone.ajaxSync’

      Backbone.sync = function(method, model, options) {
        return Backbone.getSyncMethod(model).apply(this, [method, model, options]);
      };

      return Backbone.LocalStorage;
      }));