Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
cnusinov

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.

 

Craig

Share this post


Link to post
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

Share this post


Link to post
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.

 

Thanks!

 

Craig

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...