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 读取中

　　

h5新增属性的更多相关文章

  1. H5新增属性classList

    H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...

  2. H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  3. h5新增属性本地存储

    ---恢复内容开始--- 存储的两种类型: localStorage 和 sessionStorage localstorage:没有时间限制的数据存储 sessionStorage  针对一个ses ...

  4. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  5. H5新增form控件和表单属性

    第一个知识点:表单的属性及总结 第二个知识点:H5新增的表单控件和属性以及总结 第一个知识点: 我们常见的表单验证有哪些呢 text 文本框标签 password 密码框 checkbox 多选框 r ...

  6. H5新增的标签和属性

    声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...

  7. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  8. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  9. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

随机推荐

  1. 安装和配置bazel

    2018-12-26 21:56:23 编译和移植tensorflow的C/C++源码时,用到bazel这一构建工具.本篇blog记录遇到的安装.配置问题. 吐槽 构建工具,从make/ant/cma ...

  2. 执行shell文件是，提示chmod: 更改'./shell1.sh' 的权限: 不允许的操作。

  3. 为什么在球坐标系中，sinTheta2=std::max(T(0), 1 - cosTheta(w) * cosTheta(w));

    球坐标系中,计算sin2θ时,采用的是如下公式,感觉不理解为什么要搞一个max函数,直接1 - cosTheta(w) * cosTheta(w)不行吗,另外,即使要用max,max的第一个参数应该是 ...

  4. 关于LookUp的切换实例

    在关注了很久后发现还是有太多的东西没有记住,需要自己一步一步地去学习!不用太关注太多的杂乱的事,只用关注自己一点一滴,我相信所有的一切都会有一个很好的结局.

  5. Vim的合并行操作

    日常常用到多行合并的功能,记录如下: 第一种, 多行合并成一行,即: AAAAABBBBBCCCCC 合并为:AAAAA BBBBB CCCCC 方法1: normal状态下 3J 其中的3是范围,可 ...

  6. web实现下拉列表多选加搜索

    实现如图所示的下拉多选还能带有搜索功能. <!DOCTYPE html> <html> <head> <title></title> < ...

  7. input时间表单默认样式修改（input[type="date"]）

    一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...

  8. fillder--模拟弱网

    ##设置路径## Rules--Performemnts---Silamte Mordem Speeds 弱网原理 Rules—>Cutomize Rules打开CustomRules.js 文 ...

  9. UOJ#191. 【集训队互测2016】Unknown 点分治 分治 整体二分 凸包 计算几何

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ191.html 题目传送门 - UOJ191 题意 自行移步集训队论文2016中罗哲正的论文. 题解 自行 ...

  10. List接口相对于Collection接口的特有方法

    [添加功能] 1 void add(int index,Object element); // 在指定位置添加一个元素. [获取功能] 1 Object get(int index); // 获取指定 ...