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>
<video controls="controls">
<source src="song.ogg" type="video/ogg">
</video>
<audio src="xxx.mp3" autoplay="autoplay" controls="controls"></audio>
</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分组
例如：
<select>
<optgroup label="java" disabled>
<option value="">java1</option>
<option value="">java2</option>
</optgroup>
<optgroup label="web">
<option value="">web1</option>
<option value="">web2</option>
</optgroup>
</select>
运行效果
readAsDataURL 将文件读取为DataURL readAsBinaryString 将文件读取为二进制码 readAsText 将文件读取为文本
处理事件
onabort 中断时触发 onerror 出错时触发 onload 文件都区成功时触发 onloadend 读取完成时触发，无论成功或者失败 onloadstart 读取开始时触发 onprogress 读取中