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. Oracle数据库执行exp命令--报参数'log' 不允许有多个值

    前几天设置自动备份oracle 数据库时发现一个问题,自动备份老是执行失败,后来把语句拿出来单独执行才发现是语句写的有问题,一般情况下自动备份都要自动生成日志文件,以便于我们查看备份是否正常执行.下面 ...

  2. asp.net core 创建允许跨域请求的api, cors.

    配置应用方域名. 在webapi中引用cors包,在startup的Configure\ConfigServices中增加启动项配置,在api中增加EnableCors的Attribute属性.即可. ...

  3. AndroidStudio在线搜索最新版本的依赖库

    操作步骤 打开File–>Project Structure 选中当前项目,点击Denpendencies标签 点击+,选Library dependency 打开界面如下: 输入想要的依赖库部 ...

  4. 【SPFA与Dijkstra的对比】CDOJ 1961 咸鱼睡觉觉【差分约束-负权最短路径SPFA】

    差分约束系统,求最小值,跑最长路. 转自:https://www.cnblogs.com/ehanla/p/9134012.html 题解:设sum[x]为前x个咕咕中至少需要赶走的咕咕数,则sum[ ...

  5. python函数默认参数为可变对象的理解

    1.代码在执行的过程中,遇到函数定义,初始化函数生成存储函数名,默认参数初识值,函数地址的函数对象. 2.代码执行不在初始化函数,而是直接执行函数体. 代码实例 这要从函数的特性说起,在 Python ...

  6. CentOS7.5安装nodejs 转

    CentOS7.5安装nodejs CentOS安装NodeJS 在CentOS下安装NodeJS有以下几种方法.使用的CentOS版本为7.2.CentOS其他版本的NodeJS安装大同小异,也可以 ...

  7. jenkins+ant配置自动化任务全过程

      UI自动化测试(17)  版权声明:本文为博主原创文章,未经博主允许不得转载. 1.首先,你需要写UI自动化测试,本地运行无误 2.利用ant将刚写好的程序运行起来,在Eclipse里边只需要ec ...

  8. Mysql8远程不能登录报错

    mysql8远程登录报错Client does not support authentication protocol requested by server; consider upgrading ...

  9. 51Nod1601 完全图的最小生成树计数 Trie Prufer编码

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1601.html 题目传送门 - 51Nod1601 题意 题解 首先我们考虑如何求答案. 我们将所有 ...

  10. 04. Pandas 3| 数值计算与统计、合并连接去重分组透视表文件读取

    1.数值计算和统计基础 常用数学.统计方法 数值计算和统计基础 基本参数:axis.skipna df.mean(axis=1,skipna=False)  -->> axis=1是按行来 ...