PDA

View Full Version : [SOLVED] localStorage + JSON encoding



ctp
21 Oct 2010, 9:39 AM
Hi folks,

what I'm doing wrong in my simple threeliner?


localStorage.setItem('key1', 'value1');
localStorage.setItem('key2', 'value2');
console.log(Ext.encode(localStorage));I need a localStorage in JSON representation but this ends up with:


null has invalid __iterator__ value nullIt's coming from doEncode() function in ext-all.js.

darthwes
21 Oct 2010, 9:45 AM
I'm not sure exactly what you're after, but JSON objects are simply name/value pairs nested inside brackets, like:



//this is a json object that could be used to load a store.
var localStorage = {
key1: 'value1',
key2: 'value2'
};

//example: Add an element/key
localStorage.key3 = 'value3';
localStorage['key4'] = 'value4';

//example: Remove a key
delete(localStorage.key4);

//example: Change a value
localStorage.key1 = 'value 00001';


Hope that helps.

ctp
21 Oct 2010, 9:49 AM
Thx for the reply. I need the whole localStorage as JSON struct for an AJAX req:


Ext.Ajax.request({
url: '/properties#create',
method: 'POST',
params: { data : JSON_representation_of_localStorage }
});... so the param i need on backend side must be "{data=>{'key1'=>'value1', 'key2'=>'value2'}}"

Not sure how to get this encoded ...

Foster
21 Oct 2010, 9:55 AM
are you doing something with localstorage from html5 as in this post:
http://www.sencha.com/blog/2010/05/27/the-html5-family-web-storage/

I am not familiar with its use, but if you can store inside a local variable instead, use


var localStorage1 = [];
localStorage1.push({'key1' : 'value1'});
localStorage1.push({'key2' : 'value2'});
console.log(Ext.encode(localStorage1));

ctp
21 Oct 2010, 10:04 AM
Hi Foster,

yepp, I'm using HTML5 localStorage for long term persistence. Pushing the key/value pairs into local Array and encoding it to JSON works fine. That's what I did till now. But now I need localStorage and the encoding fails :-(

Foster
21 Oct 2010, 10:08 AM
Hey Chris,

Yes I wrote a small test using your code and it failed for me as well. Only thing I can think of is to write a function called "copyLocalStorage" which returns an array and use that.. I tried messing around with this idea presented by condor:

http://www.sencha.com/forum/showthread.php?73958-Support-for-custom-JSON-encoding&p=356523

to write a custom jsonEncode method but maybe you will have better luck than me?

-Foster

ctp
21 Oct 2010, 10:18 AM
Hey Foster,

OK, I'll give it a try. Mni thx ;-) By the way, this code would be equivalent to what I need for simple array:


var foo = {
key1: 'value 1',
key2: 'value 2'
};

Ext.Ajax.request({
url: '/properties#create',
method: 'POST',
params: { data : Ext.encode(foo) }
});

What fails is:


localStorage.setItem('key1', 'value1');
localStorage.setItem('key2', 'value2');

Ext.Ajax.request({
url: '/properties#create',
method: 'POST',
params: { data : Ext.encode(localStorage) }
});

Maybe anyone has a hint for me? ;-)

Foster
21 Oct 2010, 10:25 AM
Yes the method at the top, with var foo, works for me as well, and the method at the bottom using localStorage directly, fails for me as well. When I examine in firebug localStorage has a parent node "storage" with the name/value pairs as children. i think though that using localstorage and then having something like


Ext.Ajax.request({
url: '/properties#create',
method: 'POST',
params: { data : Ext.encode(getLocalStorageAsArray()) }
});

function getLocalStorageAsArray() {
var foo = [];
//copy each item in local storage using getItem
return foo;
}


I dont know if there is a better way.. seems junky to have to copy over item by item and then call encode on that, but it should work...

VinylFox
21 Oct 2010, 10:26 AM
Isn't the simple solution just to encode the whole object and store that?

ie:

var foo = {
key1: 'value 1',
key2: 'value 2'
};

localStorage.setItem('properties-data', Ext.encode(foo));

Ext.Ajax.request({
url: '/properties#create',
method: 'POST',
params: { data : localStorage.getItem('properties-data') }
});

ctp
21 Oct 2010, 10:36 AM
The point is, I need the localStorage for a single page app with hundreds of fields and wanna add their values gradually to localStorage which will be sent JSON encoded by submitting the form. So a typical cookie replacement by localStorage ;-) To add the values to an object and encoding it wouldnt store the values before sumbission.

ctp
21 Oct 2010, 10:56 AM
OK, this does its work:


localStorage.clear();
localStorage.setItem('key1', 'value1');
localStorage.setItem('key2', 'value2');

function getLocalStorageAsArray(storage) {
var obj = new Object();
for (i=0, len=storage.length; i<len; i++) {
var item = storage.key(i);
var value = storage.getItem(item);
obj[item] = value;
}
return obj;
}

Ext.Ajax.request({
url: '/' + locale + '/properties#create',
method: 'POST',
params: { data : Ext.encode(getLocalStorageAsArray(localStorage)) }
});

darthwes
21 Oct 2010, 2:30 PM
Isn't the variable named "localStorage" global? No need to pass it?