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. 目前争论不休的问 ...
随机推荐
- git学习笔记5
查看保存的进度 git stash list 恢复进度 git stash pop 测试运行哪些文件会被删除 git clean -nd 强制删除 git clean -fd 保存当前的工作进度,会保 ...
- 【ExtJS】一个简单的TreePanel
在ExtJS中,构造一个树形结构变得很简单. 需要用到的: Ext.tree.Panel TreePanel提供树形结构的UI表示的树状结构数据. 一个TreePanel必须绑定一个Ext.data. ...
- PHP读取文件的多种方法
1.传统的方法 fopen, fclose feof:file.end of file 例子: $file_handle = fopen("c:\\myfile.txt", &qu ...
- Hibernate各种查询操作（一）
测试数据库如下 t_sort表: t_good表: 一.对象导航方式查询 查询所有食品类下面的食品 代码: //对象导航查询 @Te ...
- html控件
checkbox val = "<li class='layer'><label><input type='checkbox' checked name='la ...
- Linux定时增量更新文件--转
http://my.oschina.net/immk/blog/193926 动机与需求:现在有两台服务器A和B,由于A的存储随时会挂(某些原因),所以需要B机器上有A的备份,并且能够与A同步更新 一 ...
- Centos7 ftp服务器搭建
1.使用yum安装ftp服务端: yum install -y vsftpd 2.使用yum安装ftp客户端: yum install -y ftp.x86_64 3.开启ftp服务设置开机启动并查看 ...
- Centos7 安装mysql教程
参考原文:http://www.centoscn.com/mysql/2016/0315/6844.html 环境 CentOS 7.1 (64-bit system) MySQL 5.6.24 Ce ...
- Laravel 使用Voyager导致多个数据库连接总是返回默认连接？
问题与分析 最近的项目碰到一个奇怪的问题,在Laravel(5.3)中想建立多个数据库连接连到MySQL的不同数据库(另一个连接名为conn2),执行如下语句得到却发现得到的仍然是默认连接: $con ...
- Centos7 部署.netCore2.0项目
最近在学习.netCore2.0,学习了在Centos上部署.netCore的方法,中间遇到过坑,特意贴出来供大家分享,在此我只是简单的在CentOS上运行.NETCore网站,没有运用到nginx等 ...