Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

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.
please wait ...
Watch the Online Video Course 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 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

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now Already a member? Log in

* Estimated file size

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

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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 ?

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:

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.