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

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

所以我想到直接用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. The “SignFile” task was not given a value for the required parameter “CertificateThumbprint”的一个简单的解决方法

    这个只是其中一种解决方法,而且不是万能的 1. 由提示内容可以看出,这个一个 sign(认证)的问题, 在出现这个问题的项目上,鼠标右键,选择properties,然后选择signing. 2. 选择 ...

  2. 架构实战项目心得（三）：JAVA和MAVEN的环境配置

    1 java环境配置: 1 下载并安装jdk1.82 配置java环境变量: vi /etc/profile,在文件底部增加以下内容:export JAVA_HOME=/data/program/so ...

  3. 管理nginx(采用信号的方式)

    启动:sbin/nginx 立即停止:sbin/nginx -s stop 平滑停止:sbin/nginx -s quit 重载配置:sbin/nginx -s reload(不会导致服务器关闭, 而 ...

  4. SQL 工具系列二

    1.RedGate 工具 SQL Prompt 脚步智能提示工具 脚步提示工具,轻松写入,编辑和探索SQL: SQL Prompt能根据数据库的对象名称,语法和用户编写的代码片段自动进行检索,智能的为 ...

  5. Flash流媒体服务器软件

    所谓流媒体技术,是指将连续的影像和声音信息经过压缩处理后放在网站服务器上,让用户能够一边下载一边观看.收听(即所谓的“在线欣赏”),而不需要等整个压缩文件下载到自己的机器上才可以欣赏的网络传输技术.目 ...

  6. HOST文件配置

    HOST文件配置位置:C:\Windows\System32\drivers\etc\HOSTS 127.0.0.1 localhost 127.0.0.1 app.weilan.com 127.0. ...

  7. MySQL查询(未完结)

    MySql查询 单表查询: 查询所有字段 SELECT * FROM 表名; '*' 代表所有字段 查询指定字段 SELECT 字段名1, 字段名2 FROM 表名; 按照指定条件查询记录 1. 查询 ...

  8. Django 常用字段和参数

    一.ORM字段 类型 说明 AutoField 一个自动增加的整数类型字段.通常你不需要自己编写它,Django会自动帮你添加字段:`id = models.AutoField(primary_key ...

  9. centos install redis

    1. 下载 [logan@localhost java]$ wget http://download.redis.io/releases/redis-3.2.8.tar.gz2. 解压    [log ...

  10. css3动画基础详解（@keyframes和animation）

    我们经常会看到CSS3能制作出很炫酷的动画效果,但是自己却只能做一些简单的.原因是对CSS3动画只知其一,不知其二.最近正好有做动画的项目,于是花时间将css3动画做了一个探究之旅,记录在册. 动画是 ...