Chaining a function in JavaScript?

Question

I want to make a function that add an item to my localStorage object. E.g.:

alert(localStorage.getItem('names').addItem('Bill').getItem('names'));

The first method is getItem which gets the item for localStorage objects... but addItem would be a custom function. This chain of functions would finally alert Bill.

So, how would I make this function chain to localStorage?

Answer 1

This is possible if you create a wrapper/decorator object that makes chaining possible. This is how jQuery works for example. But it is useless in this case.

I made a possible implementation, though.

But getItem will break the chain (so it should always be used at the end).

storage().setItem('names', 'Bill').getItem('names'); // or
storage().setItem('names').addItem('Bill').getItem('names'); // or
storage().key('names').value('Bill').set().get('names');

Implementation

(function( window, undefined ) {

var storage = function( key, value ) {
  return new storage.init( key, value );
};

storage.init = function( key, value ) {
  this._key   = key;
  this._value = value;
};

storage.init.prototype = {

  key: function( key ) {
    this._key = key;
    return this;
  },

  value: function( value ) {
    this._value = value;
    return this;
  },

  get: function( key ) {
    key = isset(key) || this._key;
    return localStorage.getItem( key );
  },

  set: function( key, value ) {
    this._key   = key   = isset(key)   || this._key;
    this._value = value = isset(value) || this._value;
    if ( key && value ) {
      localStorage.setItem( key, value );
    }
    return this;
  },

  addItem: function( value ) {
    this._value = isset(value) || this._value;
    if ( this._key && value !== undefined ) {
      localStorage.setItem( this._key, value );
    }
    return this;
  },

  // aliases...
  getItem: function( key ) {
    return this.get( key );
  },
  setItem: function( key, value  ) {
    return this.set( key, value );
  }
};

function isset( value ) {
  return value !== undefined ? value : false;
}

window.storage = storage;

})( window );

Answer 2

This is impossible.

If getItem('names') returns Bill, you can't call addItem on it.
It would be possible to add addItem and getItem methods to every item in the storage, but it would be a horrible idea.

Answer 3

The simplest thing would be to not do this at all :)

If that doesn't work, then there are solutions like modifying the native getItem function but that's a really bad idea. The best way would be to write a wrapper around localStorage, much like what jQuery does to DOM nodes, and use that wrapper to get and put items in local storage. The wrapper could have an interface like:

ApplicationStorage
    getItem()
    setItem()
    key()
    removeItem()

Then define acceptable type wrappers like Array within ApplicationStorage that have methods like addItem

ApplicationStorage.Array
    addItem()

When applicationStorage.getItem("names") is called, return an object of ApplicationStorage.Array that contains the method addItem which will make chaining possible.

Answer 4

getItem('names').addItem('Bill').getItem('names')

I am confused, how do you get an item that has not been added???

getItem returns an object contains addItem method, and addItem method returns an object contains getItem method

Anyway, have a look the following tutorial. It does not completely solve your problem, but will give you an idea.

http://guanfenglin.spaces.live.com/blog/cns!4E0822BF6C959B7F!668.entry