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. 005-Python字典

    Python字典(dict) 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号{}中: ...

  2. SQL Server Profiler的简单使用

    SQL Server Profiler可以检测在数据上执行的语句,特别是有的项目不直接使用sql语句,直接使用ORM框架的系统处理数据库的项目,在调试sql语句时,给了很大的帮助. 之前写了使用SQL ...

  3. Vuex详解笔记1

    vuex 是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 什么是状态?状态这里泛指 ...

  4. ThreadLocal详解，ThreadLocal源码分析，ThreadLocal图解

    本文脉路: 概念阐释 ---->  原理图解  ------> 源码分析 ------>  思路整理  ----> 其他补充. 一.概念阐述. ThreadLocal 是一个为 ...

  5. 3.ELK 之elasticsearch CRUD

    名词介绍 index: type: document: 数据类型: 索引(index)创建示例 .   type的创建(7.x之后)将会去掉该内容,点我看为什么? 参考脚本: mapping使用 其他 ...

  6. Linux 命令行敲命令 光标移动快捷键

    在单词之间跳转,使用Ctrl+左右键. Ctrl+a跳到本行的行首, Ctrl+e则跳到页尾. Ctrl+u删除当前光标前面的文字 ctrl+k-删除当前光标后面的文字 Ctrl+w和Alt+d-对于 ...

  7. python全栈开发day76-博客主页

    一.昨日内容 1. 注册 1. form组件 - 基于正则的校验规则(手机号和邮箱) - 基于全局钩子判断两次密码是否一致 2. $.each(遍历的对象, function(){ this --&g ...

  8. window上安装zabbix agent使用案例

    下载对应的zabbix windows版本 因为zabbix server使用的版本为3.2.0版本 所以下载window 3.2的版本 https://www.zabbix.com/download ...

  9. net core体系-web应用程序-4asp.net core2.0 项目实战（1）-1目录

    Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...

  10. Spring AOP中args()、arg-names、argNames

    先小结一下: args()是用来匹配并且接收目标方法的参数的. argNames(用在注解中)与arg-names(用在XML中),他们是同一个东西. argNames用来接收AspectJ表达式中的 ...