HTML5: LocalStorage from Database to SessionStorage

HTML5 and LocalStorage is an interesting feature to store temporarily data using the client (for example reservation dates or user emails), but browser support is not unitary. That means there are two solutions using LocalStorage (not considering cookies): you have to use sessionStorage (the function localStorage is not covered in this example) or databases that can be created on the fly. SessionStorage capabilities are very powerfull, its flawless and minimizes script overload (this script includes one CRUD version for almost all popular browsers as Firefox, Internet Explorer 9, MS Edge, Opera, Chrome and Safari). The alternative is to develop a strategy to handle localstorage safe (see screenshots below). This script combines SQLite, IndexedDB and sessionStorage depending on browser version and localstorage support. In this CRUD (CREATE READ UPDATE DELETE) localstorage script is a little bit from everything present. Modernizr is used for validating localstorage browser capabilities, JQuery handles the SQLite database and a part of the IndexedDB. DOM and JavaScript care for document events plus handling - array methods and the parse text method from JSON complete the set for the localstorage strategy. All methods use DOMContentLoaded and addEventListener to make sure document is loaded and ready to process data. The IndexedDB version makes intense use of the function openCursor and cursor loop technics, while the sessionStorage is controlled by array technics as array.splice and the use of DOM as element.removeChild.

The scripts snippets you see here (the complete script is downloadable) is only a small part of the complete application. That's it. The files and other stuff are all prepared for your convenience (production and compressed scripts included).
Best regards Claudio Biesele


Part of JavaScript code:

// initialize database
db = openDatabase(database,dbversion,dbname,2 * 1024);

document.addEventListener("DOMContentLoaded", function() {
   document.getElementById("submitdata").addEventListener("click", modify);

   function modify(e) {
      var submitval = document.getElementById("submitdata").value;

      var emailval = document.getElementById("mail").value;
      if(submitval == "Add" && emailval != "") {

        if(validEmail(emailval) === true) {
          addsqlite(db,emailval);

          document.querySelector("#events").innerHTML = "";
        }

      showsqlite(db);
   }

   else if(updateval !== false && submitval == "Update") {
      updatesqlite(db,emailval);

      showsqlite(db);
   }

   else {
      validEventssqlite(0,null);
      return false;
   }
}


Part of HTML5 code:

<label for="mail"<Email:</label>
>input type="text" id="mail" name="mail" title="email" required/>
<input type="hidden" id="update" name="update" title="update" value='0'/>
<input type="submit" id="submitdata" name="submitdata" value="Add" />
<h2>Show Rows</h2>
<div id="status"> </div>
<div id="listing"> </div>
<div id="events"> </div>
<div id="info"> </div>


Picture localstorage_ff.png
1. Firefox goes best with IndexedDB and sessionStorage.
Picturelocalstorage_ie.png
2. Internet Explorer prefers sessionStorage.
Picturelocalstorage_ch.png
3. Chrome favours SQLite and sessionStorage.
Picturelocalstorage_sa.png
4. Safari takes sessionStorage.
Picturelocalstorage_op.png
5. Opera working fine with IndexedDB and sessionStorage.
Picturelocalstorage_editm.png
6. LocalStorage in edit modus.
Picturelocalstorage_delm.png
7. LocalStorage in delete modus.
Picturelocalstorage_show.png
8. LocalStorage in show modus.
Download the full script at www.fastproject.ch. The downloaded script is free from Copyright restrictions. Zurich, 23th of March 2016.
Donate with PayPal:
placeholder