javascript tutorial - [Solved-5 Solutions] Storing objects in HTML5 localStorage - javascript - java script - javascript array
Problem:
I'd like to store a JavaScript object in HTML5 localStorage, but my object is apparently being converted to a string.
Solution 1:
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));
click below button to copy the code. By JavaScript tutorial team
Solution 2:
A little improve to Justin's variant:
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
click below button to copy the code. By JavaScript tutorial team
- Because of short-circuit evaluation , getObject() will immediately return null if key is not in Storage. It also will not throw a SyntaxError exception if value is "" (the empty string; JSON.parse() cannot handle that).
- UPD. Added variable that Mark Storer mentioned in comment
Solution 3:
We might find it useful to extend the Storage object with these handy methods:
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
click below button to copy the code. By JavaScript tutorial team
This way we get the functionality that we really wanted even though underneath the APWE only supports strings.
Solution 4:
Extending the Storage object is an awesome solution. For my API, WE have created a facade for localStorage and then check if it is an object or not while setting and getting.
var data = {
set: function(key, value) {
if (!key || !value) {return;}
if (typeof value === "object") {
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
},
get: function(key) {
var value = localStorage.getItem(key);
if (!value) {return;}
// assume it is an object that has been stringified
if (value[0] === "{") {
value = JSON.parse(value);
}
return value;
}
}
click below button to copy the code. By JavaScript tutorial team
Solution 5:
There is a great library that wraps many solutions so it even supports older browsers called jStorage We can set an object
$.jStorage.set(key, value)
click below button to copy the code. By JavaScript tutorial team
And retrieve it easily
value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")