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. 目前争论不休的问 ...
随机推荐
- Vim改装成一个IDE编程环境
1 写在前面 Linux下编程一直被诟病的一点是: 没有一个好用的IDE, 但是听说Linux牛人, 黑客之类的也都不用IDE. 但是对我等从Windows平台转移过来的Coder来说, 一个 ...
- 【Lua】LWT后台用JSON与 ExtJS传递数据
要完成目录树的构建,需要前台ExtJS构筑页面,后台处理逻辑,中间由JSON传递数据. 首先搭建后台环境: require "httpd" require "lfs&qu ...
- Query performance optimization of Vertica
Don't fetch any data that you don't need,or don't fetch any columns that you don't need. Because ret ...
- Struts2 学习（一）
一.Struts 介绍 1.Struts2的概述 1.早期开发模型Servlet+JSP+JavaBean(Model2)显得力不从心: 流程凌乱.数据传递无序.缺乏辅助功能. 2.MVC模式的轻量级 ...
- 三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？
最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点.同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性. ...
- 移动端适配（2）——viewport适配
通过viewport来适配 <script> (function(){ var w=window.screen.width; console.log(w);//获取屏幕尺寸 var tar ...
- javascript截取字符串长度
<html> <head> <meta charset="UTF-8"/> <title>截取字串长度</title> ...
- if(!IsPostBack)
作用: Page.IsPostBack 是用来检查目前网页是否为第一次加载,当使用者第一次浏览这个网页时Page.IsPostBack 会传回False,不是第一次浏览这个网页时就传回True:所以当 ...
- mianxiangduixiang
package com.hanqi; public class mianxiang { public static void main(String[]args) { Cat c1 =new Cat( ...
- 抖音C#版，自己抓第三方抖音网站
感谢http://dy.lujianqiang.com技术支持 文章更新:http://dy.lujianqiang.com这个服务器已经关了,现在没用了 版权归抖音公司所有,该博客只是为交流学习所使 ...