Start learning with our library of video tutorials taught by experts. Get started
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.
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.