标签：
HTML5培训第12节课堂笔记
1. html5规范中本地储存localStorage与sessionStorage
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
localStorage:
<script>
var data={};
data.name="yang";
data.age=20;
if(window.localStorage)
{
localStorage.setItem("myname",JSON.stringify(data));
}
</script>
<ahref="002.html">11</a>
</body>
002.html读取数据
<script>
if(window.localStorage)
{
varname=localStorage.getItem("myname");
alert(name);
}
</script>
数据存储地方：
SessionStorage:
写法与localStorage没多大区别；
//sessionStorage.clear();//清除所有
//sessionStorage.removeItem();//清除指定
HTML5+规范：storage
http://www.html5plus.org/doc/zh_cn/storage.html
通过plus.storage可获取应用本地数据管理对象。
实现第一次会进入向导页，点击按钮进入首页，第二次及以后直接进入首页的效果；Storage存储是否第一次进入标志
Guide.html
//标志位，到首页
//HTML5+plus对象
plus.storage.setItem("showguide","0");
home.html 入口页面
mui.plusReady(function(){
if(plus.storage.getItem("showguide")==null)
{
//打开向导窗口
url="guide.html";
id="guide";
}
else{
//首页
url="news.html";
id="news";
}
mui.openWindow({
url:url,
id:id
});
});
2. MUI窗口管理
在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。
（1） 打开新页面
Mui参考：
http://dev.dcloud.net.cn/mui/window/
HTML5+参考:
http://www.html5plus.org/doc/zh_cn/webview.html
guide.html向导页点击按钮，进入首页news.html
参数传递使用extras
mui.openWindow({
url:"news.html",
id:"news",
show:{//show表示窗口显示控制。
aniShow:"none" //页面显示动画，默认为”slide-in-right“；
},
waiting:{//waiting表示系统等待框
autoShow:false//自动显示等待框，默认为true
},
//传递参数
extras:{
"myname":"yang","myage":"20"
}
})
},false);
});
首页news.html
<script>
mui.plusReady(function(){//凡是使用HTML5+必须放入plusReady
//关闭起始页
varh=plus.webview.getLaunchWebview();// 获取应用首页WebviewObject窗口对象
h.close();
//取传过来的参数
vardata=plus.webview.currentWebview();// 获取当前窗口的WebviewObject对象
var name=data.myname;
var age=data.myage;
})
</script>
（2） 创建子页面
MUI参考：
http://dev.dcloud.net.cn/mui/window/#subpage
在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题； mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。
mui.init({
subpages:[{
url:"newslist.html",//子页面HTML地址，支持本地地址和网络地址
id:"list",//子页面标志
styles:{
top:"40px",//子页面顶部位置
bottom:"50px"//子页面底部位置
}
}]
});
news.html的作用就是显示固定导航，newslist.html显示具体列表内容，列表项的滚动是在news.html所在webview中使用原生滚动，既保证了滚动条不会穿透顶部导航，符合app的体验，也保证了列表流畅滚动，解决了区域滚动卡顿的问题。
综合案例：实现向导页进入首页，及子窗口
入口页面：home.html
<!DOCTYPEhtml>
<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>
<link href="css/mui.min.css"rel="stylesheet"/>
</head>
<body>
<scriptsrc="js/mui.min.js"></script>
<script type="text/javascript"charset="UTF-8">
mui.init();
mui.plusReady(function(){
if(plus.storage.getItem("showguide")==null)
{
//打开向导窗口
url="guide.html";
id="guide";
}
else{
//首页
url="news.html";
id="news";
}
mui.openWindow({
url:url,
id:id
});
});
</script>
</body>
</html>
向导页面：guide.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title></title>
<linkhref="css/mui.min.css" rel="stylesheet" />
<style>
.mui-slider-indicator.mui-active.mui-indicator {
background: blue;
}
.button-area{
position:absolute;
width:100%;
height:30px;
bottom:50px;
margin:0auto;
text-align:center;
}
</style>
</head>
<body>
<divclass="mui-content">
<divclass="mui-slider">
<divclass="mui-slider-group">
<!--第一个内容区容器-->
<divclass="mui-slider-item">
<imgsrc="img/slide01.jpg" />
<!--具体内容 -->
</div>
<!--第二个内容区-->
<divclass="mui-slider-item">
<!--具体内容 -->
<imgsrc="img/slide02.jpg" />
</div>
<divclass="mui-slider-item">
<!--具体内容 -->
<imgsrc="img/slide03.jpg" />
</div>
<divclass="mui-slider-item">
<!--具体内容 -->
<imgsrc="img/slide04.jpg" />
<divclass="button-area">
<inputtype="button" value="开启应用吧" id="guideOK"/>
</div>"
</div>
</div>
<divclass="mui-slider-indicator">
<divclass="mui-indicator mui-active"></div>
<divclass="mui-indicator"></div>
<divclass="mui-indicator"></div>
<divclass="mui-indicator"></div>
</div>
</div>
</div>
<scriptsrc="js/mui.min.js"></script>
<scripttype="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function(){
document.getElementById(‘guideOK‘).addEventListener("tap",function(){
//alert("OK");
//标志位，到首页
//HTML5+plus对象
plus.storage.setItem("showguide","0");
mui.openWindow({
url:"news.html",
id:"news",
show:{//show表示窗口显示控制。
aniShow:"none" //页面显示动画，默认为”slide-in-right“；
},
waiting:{//waiting表示系统等待框
autoShow:false//自动显示等待框，默认为true
},
//传递参数
extras:{
"myname":"yang","myage":"20"
}
})
},false);
});
</script>
</body>
</html>
首页：news.html
<!DOCTYPEhtml>
<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>
<scriptsrc="js/mui.min.js"></script>
<link href="css/mui.min.css"rel="stylesheet"/>
<scripttype="text/javascript" charset="UTF-8">
/*mui.init({
subpages:[{
url:"newslist.html",
id="list",
styles:{
top:"40px",
bottom:"0"
}
}]
});*/
mui.init({
subpages:[{
url:"newslist.html",//子页面HTML地址，支持本地地址和网络地址
id:"list",//子页面标志
styles:{
top:"40px",//子页面顶部位置
bottom:"50px"//子页面底部位置
}
}]
});
</script>
</head>
<body>
<div class="mui-content">
<header class="mui-bar mui-bar-nav">
<a class="mui-iconmui-icon-bars mui-pull-left mui-plus-visible"></a>
<a id="info"class="mui-icon mui-icon-info-filled mui-pull-right"style="color: #999;"></a>
<h1class="mui-title">新闻</h1>
</header>
<nav class="mui-barmui-bar-tab">
<aid="defaultTab" class="mui-tab-item mui-active"href="tab-webview-subpage-about.html">
<spanclass="mui-icon mui-icon-home"></span>
<spanclass="mui-tab-label">首页</span>
</a>
<aclass="mui-tab-item"href="tab-webview-subpage-chat.html">
<spanclass="mui-icon mui-icon-email"><spanclass="mui-badge">9</span></span>
<spanclass="mui-tab-label">消息</span>
</a>
<aclass="mui-tab-item"href="tab-webview-subpage-contact.html">
<spanclass="mui-icon mui-icon-contact"></span>
<spanclass="mui-tab-label">通讯录</span>
</a>
<aclass="mui-tab-item"href="tab-webview-subpage-setting.html">
<spanclass="mui-icon mui-icon-gear"></span>
<spanclass="mui-tab-label">设置</span>
</a>
</nav>
</div>
<script>
mui.plusReady(function(){//凡是使用HTML5+必须放入plusReady
//关闭起始页
varh=plus.webview.getLaunchWebview();// 获取应用首页WebviewObject窗口对象
h.close();
//取传过来的参数
vardata=plus.webview.currentWebview();// 获取当前窗口的WebviewObject对象
var name=data.myname;
var age=data.myage;
})
</script>
</body>
</html>
子页面：newslist.html
<!DOCTYPEhtml>
<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>
<scriptsrc="js/mui.min.js"></script>
<style>
#list{
margin-top:-1px;
}
</style>
<link href="css/mui.min.css"rel="stylesheet"/>
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view" id="list">
<liclass="mui-table-view-cell">新闻1</li>
<liclass="mui-table-view-cell">新闻2</li>
<liclass="mui-table-view-cell">新闻3</li>
<liclass="mui-table-view-cell">新闻1</li>
<liclass="mui-table-view-cell">新闻2</li>
<liclass="mui-table-view-cell">新闻3</li>
<liclass="mui-table-view-cell">新闻1</li>
<liclass="mui-table-view-cell">新闻2</li>
<liclass="mui-table-view-cell">新闻3</li>
<liclass="mui-table-view-cell">新闻1</li>
<liclass="mui-table-view-cell">新闻2</li>
<liclass="mui-table-view-cell">新闻3</li>
<liclass="mui-table-view-cell">新闻1</li>
<liclass="mui-table-view-cell">新闻2</li>
<liclass="mui-table-view-cell">新闻3</li>
<liclass="mui-table-view-cell">新闻1</li>
<li class="mui-table-view-cell">新闻2</li>
<liclass="mui-table-view-cell">新闻3</li>
<liclass="mui-table-view-cell">新闻1</li>
<liclass="mui-table-view-cell">新闻2</li>
<liclass="mui-table-view-cell">新闻3</li>
</ul>
</div>
</body>
</html>
HTML5培训第12节课堂笔记（本地存储、mui打开新页面、创建子页面）
标签：
原文地址：http://blog.csdn.net/u013267266/article/details/51331557
