This question already has answers here: How to store objects in HTML5 localStorage (24 answers) Closed 9 years ago.
If I didn't need localStorage, my code would look like this:
var names=new Array();
names[0]=prompt("New member name?");
This works. However, I need to store this variable in localStorage and it's proving quite stubborn. I've tried:
var localStorage[names] = new Array();
localStorage.names[0] = prompt("New member name?");
Where am I going wrong?
localStorage
only supports strings. Use JSON.stringify()
and JSON.parse()
.
var names = [];
names[0] = prompt("New member name?");
localStorage.setItem("names", JSON.stringify(names));
//...
var storedNames = JSON.parse(localStorage.getItem("names"));
You can also use direct access to set/get item:
localstorage.names = JSON.stringify(names);
var storedNames = JSON.parse(localStorage.names);
The localStorage
and sessionStorage
can only handle strings. You can extend the default storage-objects to handle arrays and objects. Just include this script and use the new methods:
Storage.prototype.setObj = function(key, obj) {
return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function(key) {
return JSON.parse(this.getItem(key))
}
Use localStorage.setObj(key, value)
to save an array or object and localStorage.getObj(key)
to retrieve it. The same methods work with the sessionStorage
object.
If you just use the new methods to access the storage, every value will be converted to a JSON-string before saving and parsed before it is returned by the getter.
for (var i = 0; i < localStorage.length; i++) console.log( localStorage.key(i) +" has value " + localStorage[localStorage.key(i)] )
Use JSON.stringify()
and JSON.parse()
as suggested by no! This prevents the maybe rare but possible problem of a member name which includes the delimiter (e.g. member name three|||bars
).
Just created this:
https://gist.github.com/3854049
//Setter
Storage.setObj('users.albums.sexPistols',"blah");
Storage.setObj('users.albums.sexPistols',{ sid : "My Way", nancy : "Bitch" });
Storage.setObj('users.albums.sexPistols.sid',"Other songs");
//Getters
Storage.getObj('users');
Storage.getObj('users.albums');
Storage.getObj('users.albums.sexPistols');
Storage.getObj('users.albums.sexPistols.sid');
Storage.getObj('users.albums.sexPistols.nancy');
The JSON approach works, on ie 7 you need json2.js, with it it works perfectly and despite the one comment saying otherwise there is localStorage on it. it really seems like the best solution with the least hassle. Of course one could write scripts to do essentially the same thing as json2 does but there is little point in that.
at least with the following version string there is localStorage, but as said you need to include json2.js because that isn't included by the browser itself: 4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; BRI/2; NP06; .NET4.0C; .NET4.0E; Zune 4.7) (I would have made this a comment on the reply, but can't).
Another solution would be to write a wrapper that store the array like this:
localStorage.setItem('names_length', names.length);
localStorage.setItem('names_0', names[0]);
localStorage.setItem('names_1', names[1]);
localStorage.setItem('names_' + n, names[n]);
Removes the overhead of converting to JSON, but would be annoying if you need to remove elements, as you would have to re-index the array :)
names_length
use names_keys
and you don't need to re-index! This would also allow you to use string keys. Of course this makes only sense if the array elements are kind of hugh.
names_keys
contains an array of indices, isn't that a chicken/egg situation?
keys
.
Success story sharing
localStorage
JSON.parse(localStorage["names"] || null)
if you wanted.if(typeof JSON == "undefined") { alert("Upgrade your browser."); }