JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://nparashuram.com/IndexedDBShim/dist/IndexedDBShim.js" type="text/javascript"></script>
<div id="saveBox">
<table>
<tr>
<td class="leftCell"><label for="fname">First Name</label></td>
<td class="rightCell"><input type="text" value="" id="fname" name="fname" /></td>
</tr>
<tr>
<td class="leftCell"><label for="lname">Last Name</label></td>
<td class="rightCell"><input type="text" value="" id="lname" name="lname" /></td>
</tr>
</table>
<a href="#" class="save button">Save</a>
<a href="#" class="search button">Search</a>
</div>
<div>Index Name: <span id="indexNames"></span></div>
<div>USERS</div>
<div id="users"><ul></ul></div>
<div>SEARCH RESULTS</div>
<div id="results"><ul></ul></div>
CSS
td{
padding:5px;
}
div{
padding:15px 5px;
}
a{
padding:5px 10px;
background:yellow;
}
li{
margin-top:10px;
}
JavaScript
var phodaDB = {};
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.moz_indexedDB;
if ('webkitIndexedDB' in window) {
window.IDBCursor = window.webkitIDBCursor;
window.IDBDatabase = window.webkitIDBDatabase;
window.IDBDatabaseError = window.webkitIDBDatabaseError;
window.IDBDatabaseException = window.webkitIDBDatabaseException;
window.IDBErrorEvent = window.webkitIDBErrorEvent;
window.IDBEvent = window.webkitIDBEvent;
window.IDBFactory = window.webkitIDBFactory;
window.IDBIndex = window.webkitIDBIndex;
window.IDBKeyRange = window.webkitIDBKeyRange;
window.IDBObjectStore = window.webkitIDBObjectStore;
window.IDBRequest = window.webkitIDBRequest;
window.IDBSuccessEvent = window.webkitIDBSuccessEvent;
window.IDBTransaction = window.webkitIDBTransaction;
window.indexedDB = window.webkitIndexedDB;
}
phodaDB.v = "3";
phodaDB.index_attr = 'last';
phodaDB.db_name = "TestDB";
phodaDB.indexedDB = {};
phodaDB.indexedDB.db = null;
phodaDB.indexedDB.onerror = function(e){
console.log(e);
}
phodaDB.indexedDB.open = function(){
var request = indexedDB.open( phodaDB.db_name + phodaDB.v );
request.onsuccess = function(e){
phodaDB.indexedDB.db = e.target.result;
var db = phodaDB.indexedDB.db;
//object stores are created in setVersion transactions
if(phodaDB.v!=db.version){
}else{
phodaDB.indexedDB.getAllEntries();
}
};
request.onupgradeneeded=function(ev)
{
if(db.objectStoreNames.contains( phodaDB.db_name )){
db.deleteObjectStore( phodaDB.db_name );
}
var store = db.createObjectStore(phodaDB.db_name,{autoIncrement:true}); console.log(...