Jump to content
Larry Ullman's Book Forums

Loading Data From Mysql Into Html5 Localstorage

Recommended Posts

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.



Link to comment
Share on other sites

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?

  • Upvote 1
Link to comment
Share on other sites

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.





Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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).bind('deviceready', function(){

var output3 = $('#blog1');



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>';






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!

Link to comment
Share on other sites


  • Create New...