HTML form connecting to local H2 database

Question

I am wanting to create an HTML form for entering/viewing data on localhost.

The data is in a file based H2 database on localhost.

Ideally, I'd like to use only client-side javascript and HTML so that the user does not need to run a local web server.

I have found some information here on how to connect: http://blog.jooq.org/2014/06/06/java-8-friday-javascript-goes-sql-with-nashorn-and-jooq/

but am wondering about the next step of how to integrate the connection/SQL queries into the web form.

I am aware that the use of javascript to connect to a database is usually frowned upon for security reasons, but for this use-case, it will only be accessing data on localhost.

Also, are there any recommended javascript libraries that would make this easier?

var someDatabaseFun = function() {
    var Properties = Java.type("java.util.Properties");
    var Driver = Java.type("org.h2.Driver"); //JDBC interface for H2

    var driver = new Driver();
    var properties = new Properties();

    properties.setProperty("user", "");     // database username
    properties.setProperty("password", ""); // database password

    try {
        var conn = driver.connect(
            "jdbc:h2:~/db", properties);  // connect to database

        // Database code here
    }
    finally {
        try { 
            if (conn) conn.close();
        } catch (e) {}
    }
}

someDatabaseFun();

Answer 1

Connecting to a java based database like H2 is not easy with a pure javascript solution (despite the fact that H2 exposes itself via JDBC and HTML).
However, there are certainly ways of working with databases in pure-html. These essentially leverage indexeddb and websql storage mechanisms built into the browser. an incomplete list of javascript libraries are discussed here http://nolanlawson.com/2015/09/29/indexeddb-websql-localstorage-what-blocks-the-dom/:

• Lawnchair
• PouchDB
• LocalForage
• Dexie
• Lovefield
• LokiJS
• AlaSQL
• MakeDrive
• ForerunnerDB
• YDN-DB

These are in addition to working with pure WebSQL. For my purposes, pure WebSQL was the best solution, for example: http://www.tutorialspoint.com/html5/html5_web_sql.htm

I am wiling to lose IE/Firefox compatibility. But there are also options of shiming WebSQL to IndexedDB, for example: http://nparashuram.com/IndexedDBShim/

So, in summary, you can work with SQL client side with pure javascript but H2 is not the best DB to do this with. WebSQL has the advantage that the database is actually stored by the browser as an SQLite file (file based storage is important to my application)