Question

Possible Duplicate:
Chaining a function in JavaScript?

I asked a similar question, but a lot of people were confused and a lot of comments that made no sense (like someone commented jQuery overload… and this has nothing to do with jQuery).

So here’s my question, how do I add to the HTML5 localStorage object and make a custom function called addItem()? It could be used like:

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

or

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

Last time people freaked out asking why I would do getItem twice. The first getItem would GET the items inside of names. There will always be something inside of names. addItem would add to names, then, getItem would return the names again, but Bill would be inside.

Now, it’d be also just as good for me for it to work like the second example. getItem would return the names, addItem would add Bill to the names and then RETURN all the names, including bill.

I could do setItem, which is part of the HTML5 API, but it’s a pain:

var names = JSON.parse(localStorage.getItem("names"));
names.push("Bill");
localStorage.setItem("names", JSON.stringify(names));

Answer 1

Anurag’s suggestion sounds like the best way to go about it (Mozilla Hacks demonstrates the other option he outlines), but to take it a little further and make it chainable, you could do something like:

var MyLocalStorage = {};

MyLocalStorage.getItem = function(key) {
    return new MyItem(JSON.parse(localStorage.getItem(key)));
};

MyLocalStorage.setItem = function(key, object) {
    localStorage.setItem(key, JSON.stringify(object));
    return this.getItem(key);
};

function MyItem(object, key) {
    this.item = object;
    this.key = key;
    this.addSubItem = function(subItem) {
        if (typeof this.item.push == 'function') {
            this.item.push(subItem);
            this.save();
            return this;
        }
        return false;
    };
    this.setItem = function(object) {
        this.item = object;
        this.save();
        return this;
    };
    this.save = function() {
        MyLocalStorage.setItem(this.key, this.item);
    };
    this.toString = function() {
        return this.item.toString();
    }
}

Then you could use it like:

alert(
    MyLocalStorage
        .setItem('names', ['john', 'paul', 'ringo'])
        .addSubItem('george')
        .toString()
);

BTW: It’s almost impossible to find official documentation on the LocalStorage object (e.g. on MDC or any other online JS documentation library).