simplestorage.js
Version:
Cross-browser key-value store database to store data locally in the browser
220 lines (179 loc) • 8.78 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>simpleStorage - simple JavaScript plugin to store data locally</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="../simpleStorage.js"></script>
<script>
var list = {
keys: [],
value: {}
};
function removeRow(elm){
var key = elm.element.key;
simpleStorage.deleteKey(key);
// remove old
for(var i = list.keys.length - 1; i>=0; i--){
if(list.keys[i] == key){
list.value[list.keys[i]].row.parentNode.removeChild(list.value[list.keys[i]].row);
delete list.value[list.keys[i]]
list.keys.splice(i, 1);
}
}
}
function add(data){
var row = document.createElement("div"),
name = document.createElement("div"),
value = document.createElement("div"),
ttl = document.createElement("div"),
rem = document.createElement("div");
row.className = "row";
name.className = "col-md-2 name";
value.className = "col-md-6 value";
ttl.className = "col-md-1 ttl";
rem.className = "col-md-1 rem";
row.appendChild(name);
row.appendChild(value);
row.appendChild(ttl);
row.appendChild(rem);
name.innerHTML = "<pre>" + (data.key || "").toString().replace(/</g, "<").replace(/</g, ">") + "</pre>";
value.innerHTML = "<pre>" + (data.value || "").toString().replace(/</g, "<").replace(/</g, ">") + "</pre>";
ttl.innerHTML = "<pre class=\"ttl-val\">" + (Number(data.ttl) != Infinity && Number(data.ttl) || "–") + "</pre>";
rem.innerHTML = '<button type="button" class="btn btn-default" onclick="removeRow(this.parentNode)"><span class="glyphicon glyphicon-remove"></span> Remove</button>';
rem.element = data;
document.getElementById("list").appendChild(row);
data.row = row;
list.value[data.key] = data;
list.keys.push(data.key);
}
function update(){
var keys = simpleStorage.index(), i, len, remove = [], ttl, exists;
for(i=0, len = keys.length; i<len; i++){
if(!list.value.hasOwnProperty(keys[i])){
// add new
add({
key: keys[i],
value: JSON.stringify(simpleStorage.get(keys[i]), undefined, 4),
ttl: Math.round(simpleStorage.getTTL(keys[i]) / 1000)
});
}else{
ttl = Math.round(simpleStorage.getTTL(keys[i]) / 1000);
if(list.value[keys[i]].ttl != ttl){
// Update
list.value[keys[i]].ttl = ttl;
list.value[keys[i]].row.querySelector(".ttl-val").innerHTML = ttl != Infinity && ttl || "–";
}
}
}
// remove old
for(i = list.keys.length - 1; i>=0; i--){
exists = false;
for(var j=0, jlen = keys.length; j < jlen; j++){
if(list.keys[i] == keys[j]){
exists = true;
break;
}
}
if(!exists){
list.value[list.keys[i]].row.parentNode.removeChild(list.value[list.keys[i]].row);
delete list.value[list.keys[i]]
list.keys.splice(i, 1);
}
}
}
function set(){
var keyElm = document.getElementById("set-key"),
valueElm = document.getElementById("set-value"),
ttlElm = document.getElementById("set-ttl"),
key = keyElm.value,
value = valueElm.value,
ttl = Number(ttlElm.value) || 0;
try{
value = JSON.parse(value);
}catch(E){}
if(!key){
alert("Key not set");
return;
}
simpleStorage.set(key, value, {TTL: ttl * 1000});
if(list.value.hasOwnProperty(key)){
list.value[key].value = JSON.stringify(value, undefined, 4);
list.value[key].ttl = ttl;
list.value[key].row.querySelector(".value").innerHTML = "<pre>" + (list.value[key].value || "").toString().replace(/</g, "<").replace(/</g, ">") + "</pre>";
list.value[key].row.querySelector(".ttl-val").innerHTML = ttl != "Infinity" && ttl || "–";
}else{
update();
}
keyElm.value = "";
valueElm.value = "";
ttlElm.value = "";
}
setInterval(update, 1000);
</script>
</head>
<body>
<a href="https://github.com/andris9/simpleStorage"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="container">
<div class="page-header">
<h1>simpleStorage</h1>
<p class="lead">Stored data should remain after browser refresh. Uses localStorage + JSON.</p>
</div>
<div class="row">
<div class="col-md-2">
<h4>Key</h4>
</div>
<div class="col-md-6">
<h4>Value</h4>
</div>
<div class="col-md-1">
<h4>TTL s.</h4>
</div>
</div>
<div id="list">
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<input type="text" id="set-key" class="form-control" placeholder="Key">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" id="set-value" class="form-control" placeholder="Value (string or JSON)">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<input type="text" id="set-ttl" class="form-control" placeholder="0">
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" onclick="set()"><span class="glyphicon glyphicon-plus"></span> Add or update</button>
</div>
</div>
<div class="row">
<div class="col-md-9">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger" onclick="alert(simpleStorage.flush() === true ? 'Flushed!' : 'Flush failed');"><span class="glyphicon glyphicon-remove"></span> Flush values</button>
</div>
</div>
<blockquote>Setting TTL to 0 clears timeout. Actual used values are milliseconds but this demo page uses full seconds.<br />
Value can be a string or valid JSON</blockquote>
</div>
<script>
update();
</script>
</body>
</html>