Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Managing data in a mobile web application

From: HTML5 Power Workshop

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.

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.

Show transcript

This video is part of

Image for HTML5 Power Workshop
HTML5 Power Workshop

22 video lessons · 3865 viewers

Andy Olsen
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.