Taffydb e pobNode

Autore: Fabio Di Matteo
Ultima revisione: 04/05/2016 - 13:04

In questo articolo usero' il database per javascript Taffydb in combinazione con PobNode una libreria per creare e interagire con gli elementi del DOM di una pagina.

Codice

Creeremo una sorta di rubrica telefonica minimale, insomma un hello world.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<script src="../pobNode/examples/jquery-2.2.3.min.js"></script>
		<script src="../pobNode/pobNode.js"></script>
		<script src="../pobNode/pobLayout.js"></script>
		<script src="taffy.js"></script> 
		<style>
		.headerClass{
				background-color:  #023276;
				background: linear-gradient(#023276, #2258DA);
			}
 
			.leftSideClass{
				background-color:  #BFBFBF;
			}
		</style>
		<title>Taffy and pobNode</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<script>
 
		$(document).ready(function () {
 
			//make database
			var myDB = TAFFY();
			myDB.store('myDBtest') ; //save in localstorage "taffy_myDBtest" key
 
			myLayout=new pobLayout();
			myLayout.headerClass='headerClass';
			myLayout.leftSidebarClass='leftSideClass';
			myLayout.leftSideWidth=150;
			myLayout.border='2px Solid #023276';
			myLayout.label='<span style="font-size: 24px;padding-left:3px; color: #FFFFFF">Taffy test</span>';
			myLayout.append('<h2 style="margin-left:10px">Pobnode and Taffy</h2>');
			myLayout.append('<p style="margin-left:10px">I\'m trying to get work taffy width pobNode</p>');
			myLayout.appendLeftSidebar('<h2 style="margin:5px;">Info</h2>');
			myLayout.appendLeftSidebar('<p  style="margin:5px;font-size: 10px">You can remove entire database clicking this button:</p>');
			myLayout.attach('body');
 
			myName = new pobNode('input');
			myName.addAttr('placeholder','Name');
			myName.style='margin-left: 10px; margin-right: 10px';
			myName.attach(myLayout.jqBody);
 
			myTel = new pobNode('input');
			myTel.addAttr('placeholder','telephone number');
			myTel.style='margin-left: 10px; margin-right: 10px';
			myTel.attach(myLayout.jqBody);
 
			myEmail = new pobNode('input');
			myEmail.addAttr('placeholder','E-Mail addres');
			myEmail.style='margin-left: 10px; margin-right: 10px';
			myEmail.attach(myLayout.jqBody);
 
			mySave = new pobNode('button');
			mySave.setHtml('Save');
			mySave.attach(myLayout.jqBody);
 
			myCount = new pobNode('p');
			myCount.style='color: #00115E;font-size: 20px;margin-left: 10px';
			myCount.setHtml('Counter record: 0');
			myCount.attach(myLayout.jqBody);
 
			myList = new pobNode('p');
			myList.style='margin-left: 10px; margin-right: 10px';
			myList.attach(myLayout.jqBody);
 
 
			//Display record on startup
			myDB().each(function (r) {myList.jq.append(r.name+' '+r.tel+' '+r.email+'<br>');});
			var c = myDB().count();
			myCount.jq.html('Counter record: '+c);
 
			//On click insert a record and show results
			mySave.jq.bind('click',function(){ 
					//Insert a record in table
					myDB.insert({name: myName.jq.val(), tel: myTel.jq.val(), email: myEmail.jq.val() });
 
					myList.jq.empty();//empty my list
					myDB().each(function (r) {	
							myList.jq.append(r.name+' '+r.tel+' '+r.email+'<br>');	
						});
					var c = myDB().count();
					myCount.jq.html('Counter record: '+c);
 
				});
 
			//Empty db
			myRemoveDB = new pobNode('button');
			myRemoveDB.setHtml('Remove Db');
			myRemoveDB.attach(myLayout.jqLeftSidebar);
			myRemoveDB.jq.bind('click',function(){ 
				myDB().remove();//empty db
				localStorage.removeItem('taffy_myDBtest'); //remove localstorage
 
				//Update list of record
				myList.jq.empty();
				var c = myDB().count();
				myCount.jq.html('Counter record: '+c);
				});	
		});
 
		</script>
 
	</head>
	<body>
 
	</body>
 
</html>

Elencare tutte le chiavi localstorage create

Per conoscere quante e quali chiavi localstorage sono state create per la nostra pagina si puo' fare uso del seguente codice:

for (var key in localStorage)
{
  console.log(key)
}