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

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

所以我想到直接用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'

		});

	});

});

　　

HBuilde H5开发，关于JSON的Storage存储的更多相关文章

  1. HTML5开发——轻量级JSON存储解决方案Lawnchair.js

    Lawnchair是一个轻量级的移动应用程序数据持久化存储方案,同时也是客户端JSON文档存储方法,优点是短小,语法简洁,扩展性比较好. 现在做HTML5移动应用除了LocalStorage的兼容性比 ...

  2. chrome开发总结（交互/权限/存储）-爬虫

    chrome开发总结(交互/权限/存储)-爬虫 [TOC] 标签(空格分隔): 杂乱之地 经过一翻折腾.还是选择了chrome来做爬虫.主要是为了解决一些ajax加载的问题以及代理的问题. 1.chr ...

  3. Azure Functions（三）集成 Azure Queue Storage 存储消息

    一,引言 接着上一篇文章继续介绍 Azure Functions,今天我们将尝试绑定 Queue Storage,将消息存储到 Queue 中,并且学会适用于 Azure Functions 的 Az ...

  4. 移动h5开发资源整理

    这2年来,移动h5开发逐渐成为一种主流,也不断趋向于成熟.硬件和浏览器的不断更新,曾经的浏览器兼容也不再是开发者的噩梦. 接触h5开发一年多,从最初的新手到现在,陆陆续续遇到过很多坑.这里把想到的一些 ...

  5. 关于APP，原生和H5开发技术的争论

    App的开发技术,目前流行的两种方式,原生和Html5.原生分了安卓平台和ios平台(还有小众的黑莓.死去的塞班就不说了),H5就是Html5. 目前争论不休的问题,在早先前争论CS,BS架构的软件系 ...

  6. 【iOS-Android开发对照】之 数据存储

    [iOS-Android开发对照]之 数据存储 写在前面的话 相比Android和iOS,我认为Android的数据存储更开放一些.Android天生就能够使用多Java I/O:并且天生开放的特性, ...

  7. myEclipse+Spring boot+Hbuilder+jwt Token+mongoDB+企业微信H5开发

    企业微信应用的H5开发 1.参考文档:weUI:http://jqweui.com/ 2.企业微信接口文档:https://work.weixin.qq.com/api/doc#10029 3.百度地 ...

  8. 用H5开发微信还是开发APP？

    用H5开发微信还是开发APP? 随着技术的飞速发展,HTML第五版技术标准的更新,在移动端,由于其相对较低的开发成本及强大的跨平台运行能力,越来越多的信息型产品也开始选择这样轻量级的H5页面进行快速迭 ...

  9. 关于APP，原生和H5开发技术的争论 APP开发技术选型判断依据

    关于APP,原生和H5开发技术的争论 App的开发技术,目前流行的两种方式,原生和Html5.原生分了安卓平台和ios平台(还有小众的黑莓.死去的塞班就不说了),H5就是Html5. 目前争论不休的问 ...

随机推荐

  1. jquery colsest的用法

    如果有class,就是他自己,没有就在父级去找 e=e||window.event; var target=e.srcElement?e.srcElement:e.target; var parent ...

  2. cg教程

    Unity对shader的重点支持是cg语言,因为具有跨平台性质 Cg语言和CPU 上的C语言是很相似的,只不过有了自己的一套关键字和函数库 Cg语言的权威和入门教程在NVID1A的官方网站上,如果以 ...

  3. [LNMP]——LNMP环境配置

    LNMP=Linux+Nginx+Mysql+PHP Install Nginx //安装依赖包 # yum install openssl openssl-devel zlib-devel //安装 ...

  4. Go语言备忘录（2）：反射的原理与使用详解

    本文内容是本人对Go语言的反射原理与使用的备忘录,记录了关键的相关知识点,以供翻查. 文中如有错误的地方请大家指出,以免误导!转摘本文也请注明出处:Go语言备忘录(2):反射的原理与使用详解,多谢! ...

  5. AtomicInteger关键字

    validate 关键字可以保证多线程之间的可见性,但是不能保证原子操作.(需要了解java内存模型jmm) package com.cn.test.thread; public class Vola ...

  6. node.js缓存处理方式

    Node.JS缓存处理分为客户端和服务端两个部分. 客户端的缓存主要是利用浏览器对HTTP协议响应头中cache-control和expires字段的支持.浏览器在得到明确的响应头后,会将文件缓存在本 ...

  7. 六、Spring之DI的Bean的作用域

    Spring提供“singleton”和“prototype”两种基本作用域,另外提供“request”.“session”.“global session”三种web作用域:Spring还允许用户定 ...

  8. Light OJ 1422 - Halloween Costumes(区间DP 最少穿几件)

    http://www.cnblogs.com/kuangbin/archive/2013/04/29/3051392.html http://www.cnblogs.com/ziyi--caolu/a ...

  9. RabbitMQ基础--总结

    一. RabbitMQ的五种工作场景: 1. 单发单收 2. 单发送多接收 +++++++++++++++++++++前面两种没有使用exchange++++++++++++++++++ 3. Pub ...

  10. 移动前端开发之viewport,devicePixelRatio的深入理解

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...