HBuilde H5開發，關於JSON的Storage存儲

時間 2019-11-08

標籤 hbuilde h5 開發關於 json storage 存儲欄目 JavaScript 简体版

原文原文鏈接

今天踩坑了，在這裏記一下。javascript

我想作一個列表，開始是一個一個複製粘貼，而後發現這樣太不靈活了，若是我有更多內容要填難道還要再一個一個複製嗎？css

因此我想到直接用JS動態生成最好，個人思路是這樣的：html

//首先，我須要先從本地讀取數據，判斷本地是否有相關數據java

　　//若是若是本地沒有數據經過Ajax向服務器請求相關數據服務器

　　//將請求的數據解析存入本地固然要給它一個獨一無二的鍵名（我是採用JSON格式存儲的）app

//若是本地有數據從本地將相關數據讀出來，而後解析ide

//將解析後的數據插入到頁面中單元測試

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'
		});
	});
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。