I want to be able to store an array in JavaScript locally for use offline, etc such as in indexedDB and localStorage. However, I understand that localStorage only stores strings and indexedDB only stores objects. I know that I could just JSON serialize the array and store it in localStorage, but I am wondering if there is some more official way to do it.
5
-
2I think serializing as JSON is the official way to do this.Mike Christensen– Mike Christensen2013-08-02 02:23:00 +00:00Commented Aug 2, 2013 at 2:23
-
is there any way to do it in indexedDB? localStorage with JSON will work, but indexedDB may be more convenient.markasoftware– markasoftware2013-08-02 02:23:41 +00:00Commented Aug 2, 2013 at 2:23
-
1As far as I know, IndexedDB is a key/value pair database, where the value can be any object. Maybe try putting an array as a value and see what happens?Mike Christensen– Mike Christensen2013-08-02 02:26:30 +00:00Commented Aug 2, 2013 at 2:26
-
What are you trying to do? I can tell you indexedDB is a lot faster then the localStorage and can store a larger amout of data (localstorage = max 5MB), but indexedDB has less support... Btw in the indexedDB you have 2 solutions. You can store the array as an object in an objectstore, or store alle the items in the array individual as object in the object storeKristof Degrave– Kristof Degrave2013-08-02 06:46:38 +00:00Commented Aug 2, 2013 at 6:46
-
I want to store it as an object in a object store. localStorage is fine, but indexedDB is better for this specific situationmarkasoftware– markasoftware2013-08-02 17:14:01 +00:00Commented Aug 2, 2013 at 17:14
Add a comment
|
4 Answers
Yes, you pretty much stringify and parse from localStorage. I use this helper..
var _localStorage = {};
_localStorage.set = function(n, o){
localStorage.setItem(n, JSON.stringify(o||{}));
}
_localStorage.get = function(n){
return JSON.parse(localStorage.getItem(n));
}
_localStorage.array = function(n, f, p){
var arr = _localStorage.get(n) || [];
arr[f](p); _localStorage.set(n, arr);
}
// test
_localStorage.set('cfg', {name:'pro'});
console.log(_localStorage.get('cfg'));
_localStorage.set('cfg', [{name:'pro'}]);
_localStorage.array('cfg', 'push', {name:'flav'});
console.log(_localStorage.get('cfg'));
2 Comments
markasoftware
What if not all of the items in localStorage are arrays?
C B
You can use .get() and .set() on objects or arrays. .array() is just a helper function, so if you're storing an array so you can do this.. _localStorage.set('cfg', [{name:'pro'}]); _localStorage.array('cfg', 'push', {name:'flav'}); -- instead of having to do this -- var arr = _localStorage.get('cfg'); arr.push({name:'flav'}); _localStorage.set('cfg', arr);
You are right about using JSON to serialize it and store it in localStorage.
To store it:
localStorage['foo'] = JSON.stringify(foo);
And to retrieve it:
var foo = JSON.parse(localStorage['foo']);
I assume you are aware that this will not work in older browsers (i.e. Internet Explorer 6/7).
4 Comments
markasoftware
but to modify it I cannot use localStorage['foo'].push('hello') and things like that, correct? I would have to get it from localStorage, parse it, modify it, stringify it, and then add it to localStorage again. This is fine, but I would prefer something else.
federicot
@Markasoftware I really don't know, but I guess that you can't do that. You'll probably have to retrieve it, parse JSON, modify it, serialize it in JSON again and then store it. I may be wrong here though.
markasoftware
localStorage is not supported in IE6/7 anyway so JSON in those browsers will not be necessary
federicot
Yeah, I had forgotten that! I guess there's no way of supporting IE 6/7 in this case.
You might be interested by something like HTML5 Offline Storage: http://www.html5rocks.com/en/tutorials/offline/storage/
Concerning the way to "serialize" objects in Javascript, you can achieve that by simply keeping the JSON formalism used by Javascript Objects.
Comments
As the other answers said, it looks like JSON with localStorage is the way to do this. However, this looks like the best way to do it:
_localStorage={
getItem: function(key){
var value=localStorage.getItem(key);
try{
unJSON=JSON.parse(value);
return unJSON;
}
catch(e){
return value;
}
},
setItem: function(key,value){
if(typeof value!=='string'){
var JSONned=JSON.stringify(value)
localStorage.setItem(key,JSONned);
}
else{
localStorage.setItem(key,value);
}
}
}