h5新增属性

localStorage，sessionStorage，video，audio的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sessionStorage,localStorage,cookie</title>

</head>
<body>
	<script>
// sessionStorage离线缓存数据，关闭浏览器数据消失
		window.sessionStorage.setItem("name", 'lixiaohu');
		// 设置属性
		window.sessionStorage.setItem('age', "11");
		window.sessionStorage.setItem('sex', "girl");
		var ss = window.sessionStorage.getItem('name');//获取属性
		console.log(ss);
		// window.sessionStorage.removeItem('age');//移除某个属性的键
		// window.sessionStorage.clear();//清空缓存的数据
// localStorage本地缓存方式，关闭浏览器数据不丢失，除非手动删除数据
		window.localStorage.setItem('school', '中原工学院信息商务学院');
		window.localStorage.setItem('classname', '计算机科学与技术');
		var schools = window.localStorage.getItem('school');
		console.log(schools);
		// window.localStorage.removeItem('classname');
		// window.localStorage.clear();

	</script>

</body>
</html>

　　localStorage

if(window.localStorage){
    localStorage.setItem("userID",123);
}
var userID=localStorage.getItem("userID");

　　sessionStorage

if(window.sessionStorage){
    sessionStorage.setItem("userID",123);
}
var userID=sessionStorage.getItem("userID");

　　图片预览

<div></div>
<input type="file"/>
<script type="text/javascript">
    // 调用change事件
    $("input").change(function(){
        // 得到文件
        var file=this.files[0];
        if(window.FileReader){
        // 定义读取文件
            var fr=new FileReader();
            // 得到dataURL
            fr.readAsDataURL(file);
            // 文件加载
            fr.onloadend=function(e){
                var result=e.target.result;
                if (result==null) {
                    alert("加载失败");
                }else{
                    var $img=$("<img>");
                    $img.css("width","200px");
                    $img.attr("src",result);
                    $("div").append($img);
                }
            }
        }else{
             alert("加载失败");
        }
    });
</script>

　datalist (input + list 搭配使用) 可以查找和输入的下拉列表

<input list="datalist1">
<datalist id="datalist1" style="margin-bottom: 100px;">
<option value="web">web</option>
<option value="DataSource">DataSource</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</datalist>

optgroup option分组
例如：

运行效果

readAsDataURL 将文件读取为DataURL
readAsBinaryString 将文件读取为二进制码
readAsText 将文件读取为文本

　处理事件

onabort 中断时触发
onerror 出错时触发
onload 文件都区成功时触发
onloadend 读取完成时触发，无论成功或者失败
onloadstart 读取开始时触发
onprogress 读取中