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

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

所以我想到直接用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. CentOS7 配置免密登陆

    首先我通过VMware配置了4台机器 然后依次更改每台机器的hosts文件为:   (/etc/hosts) 192.168.32.128 linux1192.168.32.130 linux2192 ...

  2. git学习笔记5

    查看保存的进度 git stash list 恢复进度 git stash pop 测试运行哪些文件会被删除 git clean -nd 强制删除 git clean -fd 保存当前的工作进度,会保 ...

  3. 【Javascript】Javascript原型与继承

    一切都是对象! 以下的四种(undefined, number, string, boolean)属于简单的值类型,不是对象.剩下的几种情况——函数.数组.对象.null.new Number(10) ...

  4. RabbitMQ入门-理论

    目录 RabbitMQ简介 RabbitMQ原理简介 RabbitMQ安装 .NET Core 使用 RabbitMQ Hello World 工作队列 扇型交换机 直连交换机 主题交换机 远程过程调 ...

  5. 腾讯云AI应用产品总监王磊：AI 在传统产业的最佳实践

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:5月23-24日,以"焕启"为主题的腾讯"云+未来"峰会在广州召开,广东省各级政府机构领导.海 ...

  6. KVC、KVO实现过程

    1.KVC的实现过程 以 [object setValue:@"134567" forKey:@"uid"];为例子,来探究KVC的实现过程 第一步:搜索1.首 ...

  7. Apache 反向代理 丢失Authorization

    我后端API的服务器是Tomcat,而后端API验证是通过存放在头部Authorization的token值进行验证的. 我在测试Apache作为前端html解析的服务器时, 利用反向代理,把Api请 ...

  8. 错误：严重: Servlet.service() for servlet [appServlet] in context with path [] threw exception [Request processing failed; nested exception is org.mybatis.spring.MyBatisSystemException: nested exception is

    严重: Servlet.service() for servlet [appServlet] in context with path [] threw exception [Request proc ...

  9. mybatis动态参数（使用PreparedStatement插入#）和静态参数（$）

    1.使用#传递参数 #{}:被JDBC解析为PreparedStatement预编译语句,变量内容被当做一个整体变量,比如字符串,整形等. 2.使用$传递参数 ${}:纯粹是字符串替换,中间可以出现S ...

  10. 06.密封类 sealed

    sealed   修饰 密封类是不能被继承的. 密封类是可以去继承别的类. namespace _07.密封类 { class Program { static void Main(string[] ...