html本地存储对像以及模板juicer插件的使用

最新推荐文章于 2023-10-18 16:46:46 发布

yangxiaojun9238

最新推荐文章于 2023-10-18 16:46:46 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/yangxiaojun9238/article/details/49532197

版权

<!DOCTYPE html>
<html lang="en-US">
	<head>
		<title>测试</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/juicer.js"></script>
		<script type="text/javascript" src="js/jquery.json.js"></script>
		<style type="text/css">
table {
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-spacing: 0;
}

tr td {
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	padding: 10px 30px;
}
</style>
		<script type="text/javascript">
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);
}
	</script>

		<script id="tp1" type="text/template">
        <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>
</script>
	</head>
	<body>

		<div id="content"></div>
		<input type="button" οnclick="read();" value="读取"></input>

		</div>

	</body>
</html>

{
	"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
}