Start learning with our library of video tutorials taught by experts. Get started

HTML5 Power Workshop

Managing data in a mobile web application


From:

HTML5 Power Workshop

with Andy Olsen

Video: Managing data in a mobile web application

In this lesson, we're going to look at how to manage data in a mobile web application. So the sample application I've got is indexUNKNOWN. It contains three pages. The main page you can see here has a list of courses, and if I click on one of these links It take me to a details page, and it shows me the details of each course. So each course has a name, which is a string, and a course ID, which is unique for each course, obviously. A duration in terms of days, and a Boolean to indicate whether the course leads to certification or not.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5 Power Workshop
3h 9m Intermediate May 31, 2012

Viewers: in countries Watching now:

In this course, part of his series of titles on HTML5 and CSS3, author and expert Andy Olsen looks at advanced topics like geolocation, mobile development, web sockets, Web SQL, and web workers. You'll also learn how to communicate between pages downloaded from different servers and how to use the new Ajax features in XMLHttpRequest Level 2. After completing this workshop, developers be well equipped to start utilizing the powerful features of HTML5.

Topics include:
  • Using the Communications API
  • Understanding geolocation
  • Getting and watching the current position
  • Using web workers and WebSockets
  • Implementing mobile web user interfaces
  • Managing data in a mobile web application
  • Working offline
  • Using Web SQL
  • Using drag-and-drop
Subjects:
Developer Web Web Design Web Development video2brain
Software:
HTML
Author:
Andy Olsen

Managing data in a mobile web application

In this lesson, we're going to look at how to manage data in a mobile web application. So the sample application I've got is indexUNKNOWN. It contains three pages. The main page you can see here has a list of courses, and if I click on one of these links It take me to a details page, and it shows me the details of each course. So each course has a name, which is a string, and a course ID, which is unique for each course, obviously. A duration in terms of days, and a Boolean to indicate whether the course leads to certification or not.

So, that's the data that I have in the application. The data is going to be stored in the local storage. This is a very useful technique with mobile applications, we can add items to local storage, turn the application off, turn it back on again and it can recover the information from the device. So for example, if I create a new course. Let's say the course is going to be C++. And I'll make it a five day course which will lead to certification. So I click Save.

It stores the information in a local array inside the application. It also persists it to local storage. So if I close the webpage. And then go back in and open it again. So indexINAUDIBLE, open with Firefox, the example I've used just now. So, as you can see, the new course that I've just added, has been retrieved from local storage, and I can see the details there.

So, let's see how this actually works behind the scenes. In your Project Files folder, there are three files. The user interface is defined in index.html. The functionality for the web page is in uibehavior.js. But all the code relating to data storage is in data.js. So, let's take a look at that. So first of all, in order to get the example up and running, I've got some hard-coded courses here so that we have something to see the very first time the wrap application runs.

So this is a global array. It's an array of objects. Each object represents one course and each course has an ID, which is an integer. Then the name of the course, which is a string, dilation in terms of days an integer and then the Boolean flag to indicate whether or not certification results from that course. So that's my global array. lets have look what happens when the document is loaded. This is jQuery code and it says fact could be on load when the document has been completed loaded it will call this function here. So this is like an on load function and the first thing I do is check whether my device supports local storage.

So the way you do that is to take the window object and examine the local storage property. And if that's defined then you know that your device supports local storage. So, the next thing we try to do is we try recover from local storage an item called courses. So this would be set for example the second time that you visit the web app. The first time you visit the web app local store, which won't have an item called courses. But thereafter, it will. So get the items from local storage. So what's I've done here is I've retrieved the courses from the statement on 921.

I store them in string format. JavaScript has adjacent object, which has a parse function. You give it a string parameter and it'll give you back objects. So this will read a string and convert it into an array of course objects like so. So, that's what we do, if there was an item called courses, in local storage. If there wasn't, then I call a helper function called store courses. Let me show you what that one looks like down below. The store courses function simply takes the courses object and stores it in local storage.

So, it takes the courses array. Converts it into a string using the Jason's stringified function. That's a bit like a toString function, if you like. And then it stores that as an item called Courses in local storage. So local storage is always going to store string, representing the current set of courses in a string format. In the user interface, I can add new courses, as we saw just now. And someUNKNOWN code, which causes this function to be invoked.

So the Add course function, will receive, from the user interface, the name of the new course, like C plus plus on the duration, five days for example. And the Boolean inicating whether or not, its certification. I have a helper function, which generates a new course idea. This is similar to the concept of a database seed, so it will automatically increment the integer so that each course has a unique ID. I'll show that function just before we finish this lesson. Then what I do is I create a new object to represent this new course.

The new course object will have the ID we just generated on line 46 plus the course name on activation. And the certification that will pass in its parameters into this function. So that's the new course object. And then I add it to my global array. Remember, that's the array we looked at, at the top of the page. And then, I call the store courses function. That's the function we saw just here, to also store it in local storage. So local storage now contains the increased array.

The UI also lets me remove courses, so I have a remove course function here. As is fairly typical when you're removing an item, all you really need to do is know the ID of the item you're removing. So I have a helper function called get index ID, it will search through my array of courses and it will tell me were in that array is the course with the particular ID. So lets say I was trying to delete course who's ID is four it loops through the array and find the item that has the ID, if it returns minus one and indicates there was no such item. But if it returns a value of zero or higher, then this code removes the item from the array, and then we store the courses again. So the array that's been stored will no longer include the item that we've just removed.

So, there we go. That's the core for this example. We've seen how you can use an array locally. And how you can persist it to local storage. And then retrieve it back from local storage when the application starts up next time. In my particular example, I have a few helper functions as well. So we have a function that effectively simulates creation of new IDs. So this function. There are many ways to implement this. What I do is I look through all the courses I've already got, and I determine what's the maximum ID of all the items so far.

And then I return one more than it. So if the maximum ID was 11, I would return 12. That would be the ID for the next course to be added. And then, on line 90, another helped function, you give it an ID and it will tell you where in the array that ID exists. So loops through all the courses in the array and if the course matches the ID that we're looking for, then it'll be turns index or it will turn minus one if the ID wasn't found. And then finally on line 104, if have the function, it pass in an id and tell you where in the array the item exists and return that course. So to try to find the course that has the index we can now If there was no such clause, otherwise it'll return the clause at that position. Okay, so these last three helper functions are really just helper functions, to help you deal with the array.

The important code was at the top, where we showed how you can persist and retrieve items from local storage. So we can retrieve an item from local storage like this, it was the string. |So we convert it from a string using jason.pos. And the other thing we saw was where we decide to store an item in local storage using the set item function, and again, we tick the array, and store it in string format.

So that's local storage. Other possibilities, include using the web sequal approach or index databases, or perhaps sending the data to a backend web service, for example a restful service. Or at least technics exist, but in local storage is probably the simplest way to acchieve data management in a mobile web application.

There are currently no FAQs about HTML5 Power Workshop.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 Power Workshop.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked