HTML5 LocalStorage with more than two values

Question

I am looking to build a contacts list style application that saves contact information on the users computer, 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

@MarekSebera - you should post that as an answer. That's pretty much how everyone does it. — Anurag, Jan 19 '12 at 23:16

score 6 · Accepted Answer · edited May 23 '17 at 12:29

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 recommended way of doing things directly by json.org

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

Ok, thanks. I am reading up about JSON now. Never used it you see. Not used JavaScript for that long either. Thanks. — Jack H, Jan 20 '12 at 01:02

score 0 · Answer 2 · answered Jul 20 '17 at 09:52

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

score 0 · Answer 3 · answered Jan 19 '12 at 23:16

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.

score 0 · Answer 4 · answered Jan 20 '12 at 05:04

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'

HTML5 LocalStorage with more than two values

4 Answers4