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. 目前争论不休的问 ...
随机推荐
- Java TCP/IP与HTTP协议个人总结(原创)
首先举个例子方便理解: 1.应用层(http.ftp)就类似:淘宝.京东.易购等网购网站,主要用来负责选择购买商品(制定协议). 2.传输层(TCP.UDP)就类似:中通.申通等物流公司,主要负责传送 ...
- 理解C#反射
参考文章:http://blog.csdn.net/educast/article/details/2894892 上面的文章将C#反射要用到的方法都给出了,下面我将写个例子,帮助理解 [1.使用反射 ...
- oracle timestamp转换date及date类型相减
--timestamp转换为date(ts字段为timestamp类型) ; --timestamp转换为date(ts字段为timestamp类型) ; --date相减 )) FROM dual; ...
- h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽（露出黑色背景）
h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽 标签: 手机 2016-02-02 18:09 696人阅读 评论(0) 收藏 举报 在ios下,双击屏幕某些地方,滚动条会自动向上走一段. ...
- UOJ #138. 【UER #3】开学前的涂鸦
Description 红包是一个有艺术细胞的男孩子. 红包由于NOI惨挂心情不好,暑假作业又多,于是他开始在作业本上涂鸦. 一开始,他在纸上画了一棵 n 个节点的树.但是他觉得这样的画太简单了,体现 ...
- 了解下C#异常时的输出
Sample Code: try { string re = "1.1".Substring(1,4); } catch (Exception ex) { logger.Error ...
- js 验证字符串是否全为中文
js 验证字符串是否全为中文: function isChinese(str) { var reg = /^[\u4E00-\u9FA5]+$/; if(reg.test(str)){ return ...
- Mysql根据经纬度筛选数据
创建位置表,并且插入测试数据 /* Navicat MySQL Data Transfer Source Server : localhost Source S ...
- Android源码下编译APK步骤
1.进入android源码目录下的build下执行:source envsetup.sh 后继续在该路径下执行lunch. 2.编写完成工程 3.编写Android.mk文件,放入工程目录下 ...
- HDU-3790 最短路最小花费
判断路径相等时的情况 #include <iostream> #include <cstring> #include <algorithm> #include &l ...