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

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

所以我想到直接用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. unity接入安卓sdk (unity调用安卓工程)

    1.安装jdk 并且配置环境,这个网上资料很多,这里不说了 2.安卓开发软件eclipse集成环境版 下载地址 http://tools.android-studio.org/index.php/ad ...

  2. Jedis连接redis

    今天与大家分享下,Jedis连接池使用.先看一段JAVA 代码:         JedisPoolConfig config = new JedisPoolConfig();         con ...

  3. SpringMVC的json交互

    一.注解说明 1.@RequestBody  作用:@RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内 ...

  4. Exception from System.loadLibrary(smjavaagentapi) java.lang.UnsatisfiedLinkError: no smjavaagentapi in java.library.path

    可能原因: 缺少smjavaagentapi.jar文件或者libsjavaagentapi.so缺少相关的依赖包. 解决方法: 1. 检查sso的lib下面是否有smjavaagentapi.jar ...

  5. java爬取百度首页源代码

    爬虫感觉挺有意思的,写一个最简单的抓取百度首页html代码的程序.虽然简单了一点,后期会加深的. package test; import java.io.BufferedReader; import ...

  6. 网站部署中遇到的问题-未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项

    问题描述: 运行站点抛出错误:未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项 原因: 应用程序池没有启用32位程序. 解决方法: 找到站点对应的应用程序池,设置启用32 ...

  7. [android] 练习使用ListView（一）

    练习使用ListView,BaseAdapter,先展示文字的,再练习图片的 MainActivity.java package com.android.test; import android.ap ...

  8. forward和redirect请求方式

    之前一直对forward和redirect有点疑问,现在练习一下加深点记忆,理解理解,forward是一次请求,在一个request范围内,而redirect是二次请求 实例: @Controller ...

  9. spring 学习总结（一）

    一.spring概述 1.spring 是什么? Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用.Spring是于2 ...

  10. java.lang.RuntimeException: Canvas: trying to draw too large(107331840bytes) bitmap.

    环境: Android 8.0.1 MIUI 真机测试闪退 gradle 4.1 compileSdkVersion 26 buildToolsVersion '26.0.2' minSdkVersi ...