Loading Data From Mysql Into Html5 Localstorage

[cnusinov]

Hello Everyone -

 

Anyone have a good tutorial / sample of the following type of functionality:

 

I can load data from a MySQL query into a JSON object via an AJAX call. What I can not figure out is how to then move each data field into a separate variable within HTML5's local storage, so that I can use it for a quiz type application.

 

I am using PhoneGap to deploy this type of application.

 

Any pointers or links would be phenomenal and I thank you for your help.

 

Craig

[HartleySan]

Local storage in HTML5 works like any other object. It's accessible from the object literal "localStorage" in JS. The following are some example operations:

 

localStorage.name = 'Bill'; // Stores 'Bill' in the name property of the localStorage object.

alert(localStorage.name); // Alerts 'Bill'.

alert(localStorage.length); // Alerts the number of properties/methods in localStorage.

localStorage.clear(); // Empties localStorage.

 

You should be able to use a standard for...in loop to go through all the properties/methods in your JSON object and then map those to the same properties/methods in localStorage.

If you're not sure how to do that, please do a Web search for mapping object properties/methods to another object with a for...in loop.

 

Note that you should have a backup for non-HTML5 browsers, unless you don't care about those at all.

 

That help at all?

[cnusinov]

Yes, does help, sorry, bit new to this and was tasked with a PhoneGap application for both iOS and Droid. I will do the search, and I kind of get it. I was looking for that guidance on mapping those object properties to the local storage variables.

 

Thanks!

 

Craig

[HartleySan]

Sorry, I should have been more thorough in my previous post. It was late, and I was tired. Specifically, you want to use a for...in loop in combination with the hasOwnProperty method to confirm that the property/method is indeed part of that object and not some property/method from the prototype chain.

 

For example:

// Assume that you already have your JSON object in the variable 'jsonObj'.
var prop;

for (prop in jsonObj) {

 if (jsonObj.hasOwnProperty(prop)) {

   localStorage[prop] = jsonObj[prop];

 }

}

 

That should be all you need.

[cnusinov]

I am going to give this a whirl at the office tomorrow. Thanks a million, I will let you know how it goes, but I get what you are showing in your code above.

 

Craig

[HartleySan]

As long as you get it, you should be able to do it.

Good luck!

[cnusinov]

Ok, still having some issues (just sitting down again to work on this). I have the following code, which is successfully pulling back the JSON object with the data fields / rows from mysql.

 

*****Begin Code*****

 

 

$(document).ready(function(){

$(document).bind('deviceready', function(){

var output3 = $('#blog1');

 

$.ajax({

type: 'GET',

url: 'http://xxxxx.com/aaa/blog.php',

dataType: 'jsonp',

jsonp: 'jsoncallback',

timeout: 5000,

success: function(data, status){

 

$.each(data, function(i,item){

 

var blog1 = '<b>Published:</b> '+item.date+' <br>'

+ '<b>Title: </B>' +item.title+ '<br>'

+ '<b>Summary: </B>' +item.summary+'<br>'

+ '<b>Post: </b>' +item.blog_text+'<br>';

 

output3.append(blog1);}

);

 

},

error: function(){

output.text('We are sorry, the TPro blog can not be loaded at this time. Please check your network connection.');

}

});

});

});

 

 

****END CODE****

 

What I can not figure out is how to pull out a field (or multiple fields) within each JSON record, and then drop that return value (such as blog1 above) into a collapsible panel div in query mobile (building within phone gap).

 

I know this is not a JavaScript question per se, but I hope someone can help! Is this type of script sampling in Larry's AJAX book?

 

The end goal is to return the five most recent rows from mysql into 5 collapsible panels in the DOM. I am new to this (obviously) and learning by doing from all of you experts. Thank you for the help!

[Larry]

Sorry I missed this. Are you still having problems or have you figured it out?