HBuilde H5开发，关于JSON的Storage存储

今天踩坑了，在这里记一下。

我想做一个列表，开始是一个一个复制粘贴，然后发现这样太不灵活了，如果我有更多内容要填难道还要再一个一个复制吗？

所以我想到直接用JS动态生成最好，我的思路是这样的：

//首先，我需要先从本地读取数据，判断本地是否有相关数据

　　//如果如果本地没有数据通过Ajax向服务器请求相关数据

　　//将请求的数据解析存入本地当然要给它一个独一无二的键名（我是采用JSON格式存储的）

//如果本地有数据从本地将相关数据读出来，然后解析

//将解析后的数据插入到页面中

HTML代码
这没啥好看的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
   	<script src="../common/mui.js"></script>
    <link href="../common/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="questionList.css"/>
    <link rel="stylesheet" type="text/css" href="../common/app.css"/>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
	    <a class=" mui-icon mui-icon-plusempty mui-pull-right" href="../discover/discover.html"></a>
	    <h1 class="mui-title">试题列表</h1>
	</header>
	<div class="mui-card" >
	    <ul class="mui-table-view" id="message">
	    	<!--将要被替换的内容-->
	    </ul>
	</div>
	<div class="mui-content"></div>
    <script src="questionList.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

JS代码


mui.init();
mui.plusReady(function() {
	var QList = {Q1: '001', Q2: '002', Q3: '003'};
	
	//测试用再Storage中存储基础数据   一个JSON对象
	var Q1 = {title: '单元测试一',time:'18:00',doc: '一个西瓜分四瓣，猴子拿走一块，还剩几块？？？？？？？',opt: {A: '3块', B: '2块', C: '1块', D: '0块', ok: 'A'},analysis: '这个题目中提到了猴子，以此我们需要看是什么猴子。。。。'};
	//@@@@这里踩坑！！！！！！注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。
	//因此需要在这里对对象字符串化   然后再存储   存储字符会更好
	
	Q1 = JSON.stringify(Q1);
	if(plus.storage.setItem('Q1', Q1) == null){
		console.log('Q1+++++存储成功');//返回 null 表示存储成功
	}
	//####构造习题列表页面
	var Q = JSON.parse(plus.storage.getItem('Q1'));
	console.log('JSON对象：' + Q);
	var title = Q.title;
	var time = Q.time;
	var doc = Q.doc;
	var opt = Q.opt;
	var analysis = Q.analysis;
	//	for 创建5个子页面
	var insertHTML = '';
	for(var i=0;i<3;i++){
		var title = '单元测试' + i;
		var Doc = doc;
		var id = 'Q' + i;
		console.info(title + '+++++++++++' + Doc);
		insertHTML = insertHTML 
		+ '<li class="mui-table-view-cell mui-media" id="'
		+ id
		+'"><div class="mui-slider-handle mui-table"><a href="javascript:;"><div class="mui-media-body"><span class="nickname">'
		+ title 
		+ '</span><span class="list-time">' 
		+ time 
		+ '</span><p class="mui-ellipsis">'
		+ Doc 
		+ '</p></div></a></div></li>';
	}
	document.getElementById('message').innerHTML = insertHTML;
	
	
	document.getElementById('Q1').addEventListener('tap', function() {
		mui.openWindow({
			url: '../questionSet/questionSet.html',
			id: 'questionSet'
		});
	});
});