queryable
Version:
Nosql database that supports subset of mongodb operators
79 lines (64 loc) • 2.29 kB
HTML
<html><head>
<script src="../queryable.js"></script>
</head>
<body>
<h2><a href="https://github.com/gmn/queryable">Queryable</a> Browser Demo</h2>
<h3>Enter some words, then close your browser and re-open it again. Navigate to this page.</h3>
<div style="border:1px solid #999;padding:5px;width:37%;min-width:300px">
<button id="clear_btn" >Clear Cache</button>
<div id="inforows"></div>
<input id="db_ins_txt" type="text"></input>
<button id="db_ins_btn" >Press Me</button>
</div>
<script>
var db = queryable.open("DatabaseName");
document.getElementById('clear_btn').onclick = function() {
db.remove();
draw_rows();
};
document.getElementById('db_ins_btn').onclick = function() {
var t = document.getElementById('db_ins_txt');
db.insert( {text:t.value,time:db.now()} );
t.value = "";
draw_rows();
};
// bind ENTER key to BUTTON
document.body.onkeydown = function(e) {
if ( e.keyCode === 13 ) {
document.getElementById('db_ins_btn').onclick();
}
};
function rows_render()
{
var res = db.find().sort( {time:1} ); // all rows
var inforows = document.getElementById('inforows');
do {
var last = inforows.lastChild;
if ( !last )
break;
inforows.removeChild( last );
} while (1);
res.rows.forEach(function(val,i){
var e = document.createElement('div');
e.innerHTML = val.text;
inforows.appendChild(e);
});
}
function draw_rows() {
rows_render();
db.save(); // save what we see
}
draw_rows();
</script>
<h3>How it works:</h3>
<ul>
<li>queryable.js is fetched from the server in <strong><script src="/queryable.js"></script></strong> like normal</li>
<li>The database is stored <i>in</i> the browser, inside a variable provided by most browsers: <strong>localStorage</strong></li>
<li>When <strong>queryable.open(db_name);</strong> is called, if a matching <strong>db_name</strong> key is found in<br><strong>localStorage</strong>, queryable loads from it.</li>
<li>When <strong>db.save()</strong> is called, it updates the key in <strong>localStorage</strong></li>
<li>Multiple DBs can be on the same page with different <strong>db_name</strong></li>
</ul>
<br>
</body>
</html>