I am looking to build a contacts list style application that saves contact information on the users puter, using this LocalStorage functionality.

Now, the problem i am having, is that as far as I can tell, you can only store two values per entry; name and value.

I am at a bit of a loss, as I cannot think of a way around this. Any suggestions? I am hoping to store about 4/5 fields of information for a given entry.

Regards, Jack Hunt

I am looking to build a contacts list style application that saves contact information on the users puter, using this LocalStorage functionality.

Now, the problem i am having, is that as far as I can tell, you can only store two values per entry; name and value.

I am at a bit of a loss, as I cannot think of a way around this. Any suggestions? I am hoping to store about 4/5 fields of information for a given entry.

Regards, Jack Hunt

• javascript
• html

• 1 @Marek that seems pretty reasonable – Nadir Muzaffar Commented Jan 19, 2012 at 23:15
• 1 @MarekSebera - you should post that as an answer. That's pretty much how everyone does it. – Anurag Commented Jan 19, 2012 at 23:16

4 Answers 4

Consider saving collection of each data type in separate key field as a JSON in String format

// myCollection contains three objects, filled with custom type data, in array
var myCollection = [{},{},{}]
function replacer(key, value) {
    if (typeof value === 'number' && !isFinite(value)) {
        return String(value);
    }
    return value;
}
localStorage['first_collection'] = JSON.stringify(myCollection, replacer);

And if you wonder, why there is that replacer function, take a look at first link below.
It's remended way of doing things directly by json

http://www.json/js.html
JSON to string variable dump
JSON to string in Prototype
https://developer.mozilla/en/JSON
http://api.jquery./jQuery.parseJSON/

You can save data in LocalStorage as a JSON object. The KEY could then be something like "people" and the VALUE could then be an array of "people" objects. Any kind of CRUD would occur in javascript and the LocalStorage would only be used as a persistence medium.

I did this before, I don't know if it's kind of dirty, but it works for me. What I did was to rewrite the Storage prototype so I can store objects.

First, I "save" the original methods:

Storage.prototype._setItem = Storage.prototype.setItem;
Storage.prototype._getItem = Storage.prototype.getItem;

And then I rewrite with the new ones:

Storage.prototype.setItem = function(key, object){
    if(typeof object == 'object'){
        this._setItem(key, JSON.stringify(object));
    }
    else{
        this._setItem(key, object);
    }
} 
Storage.prototype.getItem = function(key){
    var val = this._getItem(key);
    try{
        val = JSON.parse(val);
    }catch(e){}
    return val;
}

Having this, you can use it as:

localStorage.setItem('test', {value: 1}); // or localStorage.setItem('test', '{value: 1}')
localStorage.setItem('test2', [3,2,1]); // or localStorage.setItem('test2', '[3,2,1]');
localStorage.setItem('test3', '{no object stuff');

And retrieve the same data with getItem

localStorage.getItem('test');  // Object: {value: 1}
localStorage.getItem('test2'); // Array: [3,2,1]
localStorage.getItem('test3'); // String: '{no object stuff'

For Example we Have Two Input Element name and email, ok then we have to store key and value pair

var name = document.getElementById('demo1').value;

var email = document.getElementById('demo2').value;

localStorage.setItem("name",name);

localStorage.setItem("email",email);