<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telphone=no, email=no" />
<link rel="stylesheet" href="css/mui.min.css" />
<link rel="stylesheet" href="css/mui.picker.min.css" />
</head>
<body>
<div class="mui-input-row">
<input id='mydate' type="text" class="mui-text-center" placeholder="选择日期">
</div>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/mui.picker.min.js"></script>
<script>
//浏览器物理清除缓存会清空掉localstorage
/*判断浏览器是否支持该特性*/
if(!window.localStorage) {
alert("浏览器不支持localstorage");
} else {
var obj = {
"a": 2,
"b": 1
};
obj = JSON.stringify(obj); //转为JSON字符串
//检查值是否存在
if(localStorage.getItem("temp2") == null) {
localStorage.setItem("temp2", obj); //返回{"a":1,"b":2}
} else {
console.log("已经有temp2了")
}
var edit = JSON.stringify({
"a": 4,
"b": 6
});
//改，即重新给变量赋值
localStorage.setItem("temp1", edit);
//删，移除存储里的值
//localStorage.removeItem("temp2");
//查询，存储里的值
var obj1 = JSON.parse(localStorage.getItem("temp2"));
//console.log(obj1);
//查询所有
console.log(localStorage);
//删，清空所有
//localStorage.clear();
}
//sessionStorage示例
//浏览器物理清除缓存会清空掉sessionStorage
if(!window.sessionStorage){
alert("浏览器不支持sessionStorage");
}else{
//自定义json数据
var obj = {
a : 12,
b : [1,2,3,4,5],
c : {
x : 'a',
y : ['bb', 12, 'cc', {a:1,b:2}],
z : 1333
}
};
//json格式化插入
sessionStorage.setItem('page', JSON.stringify(obj));
// 读取值
var page = JSON.parse(sessionStorage.getItem('page'));
console.log(page);
// 遍历下数组
for(var i=0;i< page.b.length;i++){
console.log(page.b[i]);
}
// 遍历对象，通常用in
for(var j in page.c){
console.log(page.c[j])
}
// 删除
sessionStorage.removeItem('page');
}
mui('body').on('tap', '#mydate', function() {
var th = this;
//mui日历控件初始化
var picker = new mui.DtPicker({
type: "date", //设置日历初始视图模式
beginDate: new Date(2016, 6, 6), //设置开始日期
endDate: new Date() //设置结束日期
});
console.log(picker)
picker.show(function(rs) {
th.value = rs.text;
picker.dispose();
});
});
</script>
</body>
</html>