htmlローカルストレージイメージおよびテンプレートjuicerプラグインの使用

	
		
		
		
		
		
		
		
function renderToHtml(data){
	var tpl = document.getElementById('tp1').innerHTML;
	var html = juicer(tpl, data);
	//alert(html);
	jQuery("#content").html(html);

}



window.οnlοad=function(){
 	var indexOf = function getValueByIndex(arr,index){
		if(arr.length<parseInt(index)+1){
		   return "null";
		}else{
		   return arr[index];
        }
    }
	juicer.register('indexOf', indexOf);
 write();
}
function read(){

var sj=localStorage.getItem("data");
//alert(data);
 var data = $.parseJSON(sj);
renderToHtml(data);
}
function write(){
localStorage.clear();
var xslb=new Array();
 var  xs1=new Object(); 
 xs1.no=1;
 xs1.name=" ";
 xs1.age=19;
 
 xslb.push(xs1)
 var cj=new Array();
 var  yw=new Object(); 
 yw.no=1;
 yw.name=" ";
 yw.score=88;
 
 cj.push(yw);
 var  sx=new Object(); 
 sx.no=3;
 sx.name=" ";
 sx.score=99;
 cj.push(sx);
 var  xs2=new Object(); 
 xs2.no=2;
 xs2.name=" ";
 xs2.age=16;
 xs2.cj=cj;
 xslb.push(xs2)
 
 var xx=new Object();
 xx.name=" ";
 xx.address=" ";
 var data=new Object();
 var cs=new Array();
 cs.push("1");
 cs.push("2");
 cs.push("3");
 data.xslb=xslb;
 data.xx=xx;
 data.cs=cs;
 data.total=20;
  var sj = $.toJSON(data); 
  //alert(sj);
 localStorage.setItem("data",sj);
  renderToHtml(data);
}
	

		
        <table >
        <tr><td colspan=2> :${total}   : ${xx.name}</td></tr>
       

 {@each cs as it,index}
<tr><td>-----------------------------</td><td>${cs, index | indexOf}</td></tr>
{@/each}
 {@each xslb as it,index}
		           		<tr > <td> </td><td> ${it.no}</td></tr>
		           		<tr > <td> </td><td>${it.name}</td></tr>
		           		<tr > <td> </td><td> ${it.age}</td></tr>
                         <tr > <td> </td><td>
                          {@each it.cj as it2,index}
                                                                             :${index}<br><hr>
                                                                            :${it2.no}<br><hr>
                                                                            :${it2.name}<br><hr>
                                                                           :${it2.score}<br>
                                                                           :${+it2.score/100}<br>
                                                                           :${index+1}<br>
                                                                           :${+index+1}<br>
                          {@/each}
                        </td>
                        
			     </div>
                    
        {@/each}
   <table>

	
	

		

		

		

{
	"xslb": [{
		"no": 1,
		"name": " ",
		"age": 19
	},
	{
		"no": 2,
		"name": " ",
		"age": 16,
		"cj": [{
			"no": 1,
			"name": " ",
			"score": 88
		},
		{
			"no": 3,
			"name": " ",
			"score": 99
		}]
	}],
	"xx": {
		"name": " ",
		"address": " "
	},
	"cs": ["1",
	"2",
	"3"],
	"total": 20
}