Course Planner Mobile Web App - HTML5 Local Storage API

Info

List of All Courses Offered

Course Planner Mobile Web App: Below is a list of all Courses Scheduled for the year. You can select the course you want to keep (by deleting the other courses), or you can add your own relevant elective courses.

Go Back

Course Name

Delete Course

Course ID will appear here.

Course Name will appear here.

Course Number will appear here.

Course duration will appear here.

Course certification will appear here.

Course Description will appear here.

Create a new course

Create a New Course. The new course will show at the end of the list.

Edit Course: course.name

Are You Sure ...

You want to delete this course? Select YES to Confirm or Exit to Cancel

YES EXIT

What is the HTML5 Local Storage API?

The Web Storage API provides mechanisms by which browsers can securely store key/value pairs, in a much more intuitive fashion than using cookies.[Source]

The two mechanisms within Web Storage are as follows:

sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).
localStorage does the same thing, but persists even when the browser is closed and reopened. Data is persistent within a specific browser and device. Data is not persistent across different browsers and devices.

This Mobile Web App uses the latter method: the localStorage mechanism. With local storage, web applications can store data locally within the user's browser. Local storage is per origin (specific browser, device, domain and protocol (http, ftp,...)). All pages, from one origin, can store and access the same data.

Other possibilities of Local Storage, include using the Web SQL approach, which is deprecated, or sending the data to a backend web service, for example a restful service. But localStorage is the simplest way to achieve data management in a mobile web application.

Course Planner Mobile Web App

About this Mobile Web App

This Mobile Web APP was developed using the jQuery Mobile framework and the HTML5 Local Storage API to display a customized list of courses. This app allows you to customize your own individual study plans by choosing the courses you want to keep or adding new courses to your list.

If you want to start over with the initial set of courses, you can clear your browser's cache especially the 'cookies and other site and plugin data' if you are using Google Chrome browser or clear 'cookies' option if you are using Firefox.

NOTE: All course sample data is taken from eClasses.org. It is a great online training platform for Web developers to enhance their knowledge.

Features of this App

For the First time, you get the complete set of courses to choose from, a list of 40 courses.
You have the option to search existing courses.
You have the option to delete courses that you don't want (and you get a mobile friendly confirmation message prior to deletion).
You have the option to add new courses to your list.
The user input is sanitized to display as text and prevent unwanted scripts and malicious code. Script and HTML tags are removed.
The user is prevented from directly accessing internal URL. Internal URLs are redirected to main.

Future Enhancements to this App

Add an option to edit an existing Course.
Add a Delete button beside each course tab at the main page.