Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
130 lines (116 sloc) 4.03 KB
<!DOCTYPE html>
<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;}
<script src=""></script>
<script src="jstorage.js"></script>
* 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;
alert("KEY NEEDS TO BE SET!");
$.jStorage.set(key, val);
$('key').value = "";
$('val').value = "";
* get_value
* alerts a value from jStorage with a key from a form field
* @return
get_value: function(){
var value = $.jStorage.get($F("key2"));
$('key2').value = "";
* flush_values
* clears all data
* @return
flush_values: function(){
* reDraw
* fills table with data from jStorage
* @return
reDraw: function(){
var row, del, indx=$.jStorage.index();
for(var i=0; i<indx.length; i++){
row = new Element("tr",{className:"rida"});
row.insert(new Element("td").update(indx[i]));
row.insert(new Element("td").update($.jStorage.get(indx[i])));
del = new Element("a",{href:"javascript:void(0)"}).update("DEL");
del.observe("click", function(){
row.insert(new Element("td").insert(del));
<div class="container">
<h1>jStorage - store data locally with JavaScript</h1>
<p><strong><a href="">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%">
<tr><td width="120">KEY</td><td>VALUE</td><td width="50">&nbsp;</td></tr>
<tbody id="tulemused"></tbody>
<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%" /></td>
<td><a href="javascript:JSOTRAGE_TEST.insert_value()">ADD</a></td>
<td><input type="text" id="key2" name="key2" value="" style="width: 110px;" /></td>
<td>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>
<td>Clear all saved data</td>
<td><a href="javascript:JSOTRAGE_TEST.flush_values()">FLUSH</a></td>
<p>&copy; 2010 Andris Reinman, <a href=""></a><br /><a href="">jStorage</a> is licensed under <a href="">MIT-styled license</a>, so basically you can do whatever you want to do with it.</p>
// Fill the table with previously saved data