Instead of using the Local Storage API, the IndexedDB API could be used for locally storing the application data. With Local Storage you only have one database (which you may have to share with other apps from the same domain) and there is no support for database tables (we have worked around this limitation in our approach). With IndexedDB you can set up a specific database for your app, and you can define database tables, called 'object stores', which may have indexes for accessing records with the help of an indexed attribute instead of the standard identifier attribute. Also, since IndexedDB supports larger databases, its access methods are asynchronous and can only be invoked in the context of a database transaction.

Alternatively, for remotely storing the application data with the help of a web API one can either use a back-end solution component or a cloud storage service. The remote storage approach allows managing larger databases and supports multi-user apps.

For simplicity, we have used raw HTML without any CSS styling. But a user interface should be appealing. So, the code of this app should be extended by adding suitable CSS style rules.

Today, the UI pages of a web app have to be adaptive (frequently called "responsive") for being rendered on different devices with different screen sizes and resolutions, which can be detected with CSS media queries. The main issue of an adaptive UI is to have a fluid layout, in addition to proper viewport settings. Whenever images are used in a UI, we also need an approach for adaptive bitmap images: serving images in smaller sizes for smaller screens and in higher resolutions for high resolution screens, while preferring scalable SVG images for diagrams and artwork. In addition, we may decrease the font-size of headings and suppress unimportant content items on smaller screens.

For our purposes, and for keeping things simple, we customize the adaptive web page design defined by the HTML5 Boilerplate project (more precisely, the minimal "responsive" configuration available on www.initializr.com). It just consists of an HTML template file and two CSS files: the browser style normalization file normalize.css (in its minified form) and a main.css, which contains the HTML5 Boilerplate style and our customizations. Consequently, we use a new css subfolder containing these two CSS files:

MinimalApp-with-CSS
  css
    main.css
    normalize.min.css
  src
    c
    m
    v
  index.html

One customization change we have made in index.html is to replace the <div class="main"> container element with the new HTML 5.1 element <main> such that we obtain a simple and clear UI page structure provided by the sequence of the three container elements <header>, <main> and <footer>. This change in the HTML file requires corresponding changes in main.css. In addition, we define our own styles for <table>, <menu> and <form> elements. Concerning the styling of HTML forms, we define a simple style for implicitly labeled form control elements.

The start page index.html now must take care of loading the CSS page styling files with the help of the following two link elements:

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">

Since the styling of user interfaces is not our primary concern, we do not discuss the details of it and leave it to our readers to take a closer look. You can run the CSS-styled minimal app from our server or download its code as a ZIP archive file.