Local persistence service for cells

[kentmw]

I'd like to persist cells to local storage and then recreate that cell later. Here's my attempt:

var Torso = require('backbone-torso');

module.exports = Torso.ServiceCell.extend({

	watch: function(cell, alias) {
		this.listenTo(cell, 'change', () => { this.saveCell(cell, alias); });
		this.saveCell(cell, alias);
	},

	stopWatching: function(cell) {
		this.stopListening(cell);
	},

	getCell: function(CellClass, alias) {
		return new CellClass(this._getData(alias));
	},

	updateCell: function(cell, alias) {
		cell.set(this._getData(alias));	
	}

	saveCell: function(cell, alias) {
		localStorage.setItem(alias, JSON.stringify(cell.toJSON()));
	},

	_getData: function(alias) {
		return JSON.parse(localStorage.getItem(alias));
	}

});

[mandragorn]

what does localStorage.getItem('someItemThatDoesNotExist') return? I.e. what if you try to get a cell before you've called save or watch?

[kentmw]

it returns null out of localstorage. It returns an empty cell if getCell is called. It doesn't change the cell if updateCell is called

[mandragorn]

is it work having a getAndWatch method that would allow you to both get and watch the cell? I feel like that is how I'd normally want to use this - get a cell that mirrors the local storage to cover both the case of a cell that isn't saved yet and one that is.

What happens if you change the local storage via a separate tab? Is there a way to pick up those changes? Or will the 2 tabs compete?

[kentmw]

This code bit by @stonecalvin was found in nexus-robot:

module.exports = Torso.Model.extend({

  /**
   * @property localStorageName {String} The unique name for this settings model, used
   *               to generate its local storage key. This property must be set to a
   *               unique value for each instance of this model.
   */
  localStorageName: 'default',

  /**
   * Generates a key that should be unique per instance of this model.
   * It has a prefix of "npsm-" (nexus-prime settings model) to ensure an extra bit of
   * collision protection.
   * @method getLocalStorageKey
   * @returns {String} the local storage key for this model instance.
   */
  getLocalStorageKey: function() {
    return 'npsm-' + this.localStorageName;
  },

  /**
   * Loads the settings data from the browser's local storage.
   * @private
   * @method _loadDataFromLocalStorage
   */
  _loadDataFromLocalStorage: function() {
    let savedModelString = localStorage.getItem(this.getLocalStorageKey());
    this.set(JSON.parse(savedModelString));
  },

  /**
   * Upserts (updates or inserts) the settings data to the browser's local storage.
   * @private
   * @method _upsertToLocalStorage
   */
  _upsertToLocalStorage: function() {
    localStorage.setItem(this.getLocalStorageKey(), JSON.stringify(this.toJSON()));
  },

  /**
   * @Override
   * @method sync
   */
  sync: function(method, model) {
    let deferred = new $.Deferred();

    switch (method) {
      case 'patch':
        // Writing to local storage shouldnt be costly, so we will defer to
        // full object updates for patch requests.
        /* falls through */
      case 'create':
        /* falls through */
      case 'update':
        model._upsertToLocalStorage();
        break;
      case 'read':
        try {
          model._loadDataFromLocalStorage();
        } catch (e) {
          // Error when occurred when loading or parsing the data from local storage
          deferred.reject(e);
          return deferred.promise();
        }
        break;
      case 'delete':
        localStorage.removeItem(model.getLocalStorageKey());
        break;
      default:
        deferred.reject(Error('Unknown sync method requested: [' + method + ']'));
        return deferred.promise();
    }

    deferred.resolve('Successfully synced with local storage object');
    return deferred.promise();
  }
});