jstorage
Version:
jStorage is a cross-browser key-value store database to store data locally in the browser - jStorage supports all major browsers, both in desktop (yes - even Internet Explorer 6) and in mobile.
166 lines (148 loc) • 5.41 kB
HTML
<html>
<head>
<title>jStorage - simple JavaScript plugin to store data locally</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body{font-family: Sans-serif;font-size: 13px;color: #333;}
table{border-left: 1px solid #CDEB8B;border-top: 1px solid #CDEB8B;}
h1{padding-top: 50px;font-size: 26px;font-weight: bold; border-bottom: 3px solid #CDEB8B;}
td{padding: 3px;border-right: 1px solid #CDEB8B;border-bottom: 1px solid #CDEB8B;}
thead{background: #006E2E;color: white;}
.container{width: 700px;margin: 10px auto;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="../jstorage.js"></script>
<script>
JSOTRAGE_TEST = {
/**
* insert_value
* takes data from form fields and stores it with jStorage
* @return
*/
insert_value: function(){
var row = new Element("tr"),
key = $('key').value,
val = $('val').value,
ttl = Number($('ttl').value) || 0;
if(!key){
alert("KEY NEEDS TO BE SET!");
$('key').focus();
return;
}
$.jStorage.set(key, val);
if(ttl>0){
$.jStorage.setTTL(key, ttl);
}
$('key').value = "";
$('val').value = "";
$('ttl').value = "";
this.reDraw();
},
/**
* get_value
* alerts a value from jStorage with a key from a form field
* @return
*/
get_value: function(){
var value = $.jStorage.get($F("key2"));
alert(value);
$('key2').value = "";
},
/**
* flush_values
* clears all data
* @return
*/
flush_values: function(){
$.jStorage.flush();
this.reDraw();
},
/**
* reDraw
* fills table with data from jStorage
* @return
*/
reDraw: function(){
var row, del, indx=$.jStorage.index(), valuetd;
$$("tr[class~=rida]").each(function(c){c.remove();});
for(var i=0; i<indx.length; i++){
row = new Element("tr",{className:"rida"});
row.insert(new Element("td").update(indx[i]));
valuetd = new Element("td").update($.jStorage.get(indx[i]));
valuetd.setAttribute("colspan",2);
valuetd.colspan = 2;
row.insert(valuetd);
del = new Element("a",{href:"javascript:void(0)"}).update("DEL");
(function(i){
del.observe("click", function(){
$.jStorage.deleteKey(i);
JSOTRAGE_TEST.reDraw();
});
}).call(this,indx[i])
row.insert(new Element("td").insert(del));
$("tulemused").insert(row);
}
}
}
$.jStorage.listenKeyChange("test", function(key, action){
JSOTRAGE_TEST.reDraw();
alert(key+" "+action+" ("+$.jStorage.get(key, "~~")+")");
});
var hasFocus = false;
$.jStorage.subscribe("valchange", function(channel, payload){
if(window.hasFocus){
return;
}
$("val").value = payload;
});
</script>
</head>
<body>
<div class="container">
<h1>jStorage - store data locally with JavaScript</h1>
<p><strong><a href="http://www.jstorage.info">jStorage</a></strong> is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data on browser side.</p>
<p>Add some values and refresh the page - if your browser supports storing local data, then the values should survive the page refresh.</p>
<table cellspacing="0" cellpadding="0" style="width: 100%">
<thead>
<tr>
<td width="120">KEY</td>
<td>VALUE</td>
<td>TTL (ms)</td>
<td width="50"> </td>
</tr>
</thead>
<tbody id="tulemused"></tbody>
<tfoot>
<tr>
<td><input type="text" id="key" name="key" value="" style="width: 110px;" /></td>
<td><input type="text" id="val" name="val" value="" style="width: 98%" onblur="window.hasFocus=false;" onfocus="window.hasFocus=true;" onkeyup="$.jStorage.publish('valchange', this.value);" onchange="$.jStorage.publish('valchange', this.value);"/></td>
<td width="100"><input type="text" id="ttl" name="ttl" value="" style="width: 100px" /></td>
<td><a href="javascript:JSOTRAGE_TEST.insert_value()">ADD</a></td>
</tr>
<tr>
<td><input type="text" id="key2" name="key2" value="" style="width: 110px;" /></td>
<td colspan="2">Clicking "GET" alerts the value for provided key with the method <em>$.jStorage.get(key)</em></td>
<td><a href="javascript:JSOTRAGE_TEST.get_value()">GET</a></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Clear all saved data</td>
<td><a href="javascript:JSOTRAGE_TEST.flush_values()">FLUSH</a></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Refresh to clear expired keys</td>
<td><a href="javascript:JSOTRAGE_TEST.reDraw()">REFRESH</a></td>
</tr>
</tfoot>
</table>
<p><b>NB!</b> Key "test" has a special meaning - if it is updated or deleted, all open windows of the same page will alert the change.</p>
<p id="moot"></p>
<p id="footer">© 2010 - 2012 Andris Reinman, <a href="mailto:andris.reinman@gmail.com">andris.reinman@gmail.com</a><br /><a href="http://www.jstorage.info">jStorage</a> is licensed under <a href="http://www.jstorage.info/static/license.txt">MIT-styled license</a>, so basically you can do whatever you want to do with it.</p>
<script>
// Fill the table with previously saved data
JSOTRAGE_TEST.reDraw();
</script>
</body>
</html>