Adding to localStorage Object (chaining)

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

@Anurag that was by him as well. He mentioned it in his question. I'm guessing this is an addendum. — Mark, Jul 05 '10 at 22:57
it's not even a possible duplicate. it's an intended duplicate... — gblazex, Jul 05 '10 at 22:58
*"and this has nothing to do with jQuery"* So why did you tag it with jQuery? — user113716, Jul 05 '10 at 23:01
Hmm, reading previous answers, I think some people come across as pretty offensive. Yes you're educating less knowledgeable people, but surely you can be nicer about it. Comments like 'jquery overload' is just douchebaggery. — Mark, Jul 05 '10 at 23:02
@galambalazs Thank you, i was trying it out, and i commented. Sorry, i was getting flamed and i just tried to get out of there and try to rephrase it a little. :) thanks again @patrick it made sense at the time, i didn't think people would think it WAS jQuery. I was *thinking* people who knew jQuery and knew about chaining might know a solution is all. @Mark thanks, yes — Oscar Godson, Jul 05 '10 at 23:38
@Oscar – Clear, I removed the jQuery tag, as this kind of chaining has nothing to do with jQuery, it's just a native JavaScript feature. — Marcel Korpel, Jul 05 '10 at 23:47
@galam – Haha, no, but it's never too late to weed out irrelevant tags to prevent possible confusion in the future (and voting to close this question, of course). BTW, that ‘possible duplicate of’ text is automatically inserted on the first close vote, even as the closing reason is called ‘exact duplicate’. ;-) — Marcel Korpel, Jul 06 '10 at 00:24

score 4 · Accepted Answer · answered Jul 06 '10 at 02:03

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

score 2 · Answer 2 · answered Jul 05 '10 at 23:14

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

Adding to localStorage Object (chaining)

2 Answers2