HBuilde H5开发，关于JSON的Storage存储
今天踩坑了，在这里记一下。
我想做一个列表，开始是一个一个复制粘贴，然后发现这样太不灵活了，如果我有更多内容要填难道还要再一个一个复制吗？
所以我想到直接用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存储的更多相关文章
- HTML5开发——轻量级JSON存储解决方案Lawnchair.js
Lawnchair是一个轻量级的移动应用程序数据持久化存储方案,同时也是客户端JSON文档存储方法,优点是短小,语法简洁,扩展性比较好. 现在做HTML5移动应用除了LocalStorage的兼容性比 ...
- chrome开发总结（交互/权限/存储）-爬虫
chrome开发总结(交互/权限/存储)-爬虫 [TOC] 标签(空格分隔): 杂乱之地 经过一翻折腾.还是选择了chrome来做爬虫.主要是为了解决一些ajax加载的问题以及代理的问题. 1.chr ...
- Azure Functions（三）集成 Azure Queue Storage 存储消息
一,引言 接着上一篇文章继续介绍 Azure Functions,今天我们将尝试绑定 Queue Storage,将消息存储到 Queue 中,并且学会适用于 Azure Functions 的 Az ...
- 移动h5开发资源整理
这2年来,移动h5开发逐渐成为一种主流,也不断趋向于成熟.硬件和浏览器的不断更新,曾经的浏览器兼容也不再是开发者的噩梦. 接触h5开发一年多,从最初的新手到现在,陆陆续续遇到过很多坑.这里把想到的一些 ...
- 关于APP，原生和H5开发技术的争论
App的开发技术,目前流行的两种方式,原生和Html5.原生分了安卓平台和ios平台(还有小众的黑莓.死去的塞班就不说了),H5就是Html5. 目前争论不休的问题,在早先前争论CS,BS架构的软件系 ...
- 【iOS-Android开发对照】之 数据存储
[iOS-Android开发对照]之 数据存储 写在前面的话 相比Android和iOS,我认为Android的数据存储更开放一些.Android天生就能够使用多Java I/O:并且天生开放的特性, ...
- myEclipse+Spring boot+Hbuilder+jwt Token+mongoDB+企业微信H5开发
企业微信应用的H5开发 1.参考文档:weUI:http://jqweui.com/ 2.企业微信接口文档:https://work.weixin.qq.com/api/doc#10029 3.百度地 ...
- 用H5开发微信还是开发APP？
用H5开发微信还是开发APP? 随着技术的飞速发展,HTML第五版技术标准的更新,在移动端,由于其相对较低的开发成本及强大的跨平台运行能力,越来越多的信息型产品也开始选择这样轻量级的H5页面进行快速迭 ...
- 关于APP，原生和H5开发技术的争论 APP开发技术选型判断依据
关于APP,原生和H5开发技术的争论 App的开发技术,目前流行的两种方式,原生和Html5.原生分了安卓平台和ios平台(还有小众的黑莓.死去的塞班就不说了),H5就是Html5. 目前争论不休的问 ...
随机推荐
- redis3.0 cluster功能介绍
edis从3.0开始支持集群功能.redis集群采用无中心节点方式实现,无需proxy代理,客户端直接与redis集群的每个节点连接,根据同样的hash算法计算出key对应的slot,然后直接在slo ...
- 大型网站技术学习-3. 容器Docker与kubernetes
大型网站技术基石篇-容器Docker与kubernetes Docker和Kubernetes的关系就如Xen与OpenStack. Docker是一种容器技术,和Hypervisor(KVM/X ...
- Xshell关闭导致jar服务终止，使Jar在CentOS后台运行
环境:Xsehll6,CentOS7 在项目文件夹新建一个runjar.sh 在sh中写入(举例说明) nohup java -Dfile.encoding=UTF- -jar fin-mgmt-.j ...
- mysql之调优概论
一 简介 咱们先不说cpu的频率,内存的大小(这个和索引一样重要,但不是本文讨论的内容),硬盘的寻道时间.想起mysql的调优,最起码的必须知道explain执行计划,慢sql日志,老旧的profi ...
- html空白文字宽度
原文链接 名称 编号 描述 不断行的空白(1个字符宽度) 半个空白(1个字符宽度) 一个空白(2个字符宽度) 窄空白(小于1个字符宽度) 小写加分号!
- 2017年11月28日 C#进程和线程
进程 需要放using System.Diagnostics;才可以用进程 用时的方法名为Process 用两个按钮一个为选择文件夹一个为打开可以打开系统内的进程. 注意:打开时一定要用进程名 Pro ...
- Java基础（七）常用类
一.Math类 1.Math类介绍 Math类属于java.lang包下面,里面包含用于执行基本数学运算的方法,如初等指数,对数,平方根和三角函数,该类被final修饰. 常用字段: 1.E 表示自然 ...
- 工厂模式（Factory Pattern）
一.工厂模式(Factory Pattern)的介绍 工厂模式是我们最常用的实例化对象模式了,是用工厂方法代替new操作的一种模式.在工厂模式中,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使 ...
- Maven --- <distributionManagement>标签
1.<distributionManagement>的作用: 负责管理构件的发布.这是一个环境变量 <downloadUrl> URL </downloadUrl& ...
- jasperreports+iReport+jatoolsPrinter制作报表笔记
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 准备工作 1. 点击此下载相关的文件,并把 ims 文件夹放到 ims 工程对应的路劲下 2. 参考网址:杰创打印控件 二. ...