Adding to localStorage Object (chaining) [duplicate]

This question already has answers here: 开发者_Go百科 Closed 12 years ago.

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));

---

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).

---

The Storage API stores a key, value pairs both of which are strings. So they need to be serialized somehow, and later deserialized when retrieving. In your example, you are using JSON as the (de)serialization mechanism.

getItem will always return the string you stored. It has to be deserialized before you get an object out of it. You can modify the native getItem function and do the (de)serialization internally, or write a wrapper for localStorage that does it for you. Please read the other answers before you re-post the question. That is what the other answers were saying. They did not say that you must use jQuery. Writing a wrapper is fairly simple.

var MyLocalStorage = {};

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

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