Simple Brief Webstorage in HTML5 Example

<script>
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

function createTable(){
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
}
createTable();

function addRecord(id, logerName){
db.transaction(function (tx) {
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES ('+id+', "'+logerName+'")');
});
fetchDataFromDatabase();
}

function removeRecord(loggerId){
db.transaction(function (tx) {
  tx.executeSql('DELETE from LOGS WHERE id = '+loggerId);
});
console.log(loggerId+" Deleted Successfully");
fetchDataFromDatabase();
}

function fetchDataFromDatabase(){
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function(tx, results){
var len = results.rows.length, i;
document.getElementById("result").innerHTML="Total Records in the database "+len;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).id + "</b> &nbsp;&nbsp;&nbsp;&nbsp;<b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#result').innerHTML +=  msg;
}
}, null);
});
}


function getBase64FromImageUrl(t) {
var filesSelected = t.files;
if (filesSelected.length > 0) {
 var fileToLoad = filesSelected[0];

 var fileReader = new FileReader();

 fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
console.log(srcData);
 }
 fileReader.readAsDataURL(fileToLoad);
}
}
</script>

<input type="text" id="id" placeholder="Enter Logger Id"/>
<input type="text" id="logerName" placeholder="Enter Logger Name"/>
<button onclick="addRecord(document.getElementById('id').value, document.getElementById('logerName').value)">Store To Database</button>

<hr/>
<button onclick="fetchDataFromDatabase()">Get Records from Database</button>
<br/>
<br/>
Data in Local is <p id="result"></p>

<hr/>
<input type="text" id="loggerId" placeholder="Enter Logger Id to remove"/>
<button onclick="removeRecord(document.getElementById('loggerId').value)">Remove from The Database</button>

<hr/>

<input type="file" onchange="getBase64FromImageUrl(this)"/>
<p id="imgTest"></p>