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

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

所以我想到直接用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. 前端emmet插件的一些常用用法

    以下是在webstorm中简单使用emmet插件,注意一点就是当编写完emmet命令后一定要把光标移动到命令的结尾处,不然生成的代码会不一样 <!DOCTYPE html> <htm ...

  2. hibernate 中对象的3种状态总结

    1.Hibernate把对象分文三种状态:Transient(临时状态).Persistent(持久化状态).Detached(游离状态). 1)Transient:刚刚new出来的对象,就是Tran ...

  3. train,dev,test数据集作用

      train为训练语料,用于模型训练:   dev为开发集,用于模型参数调优:   test用于测试

  4. 资料汇总--Java

    01.从零开始学springBoot 02.java资源大全中文版 03.谷歌 中国

  5. sublime text 3 PHP 所需插件

    1. PHP代码语法验证插件:SublimeLinter 2.Bracket Highlighter 用于匹配括号,引号和html标签.对于很长的代码很有用.安装好之后,不需要设置插件会自动生效 3. ...

  6. Firebird Fluentdata

    Fluentdata 支持很多种数据库驱动,但对Firebird不友好,不过可以使用DB2Provider来操作大部分功能, 例如: new DbContext().ConnectionString( ...

  7. plpgsql 函数定义

    --Function: dbo.fn_test(integer) --DROP FUNCTION dbo.fn_test(integer); CREATE OR REPLACE FUNCTION db ...

  8. SQL 文件以及文件组

    1.SQL Server根据分区表名查找所在的文件及文件组实现脚本 --SQL Server根据分区表名查找所在的文件及文件组实现脚本 SELECT fg.name AS FileGroupName ...

  9. group by 语句

    user E_book go 这样的程序会出错,因为play没有使用sum,所以要分组. group by play 有函数的和没有函数的表一起使用要用 GROUP BY .AVG 求平均值,只能与数 ...

  10. Effective C++ .33 子类的名称覆盖

    #include <iostream> #include <cstdlib> using namespace std; class Base { public: int add ...