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. 【C++ Primer | 07】常用算法

    第一部分 常用泛型算法: find(beg, end, val); equal(beg1, end1, beg2); fill(beg, end, val); fill_n(beg, cnt, val ...

  2. jdk1.8学习、jdk1.9学习、jdk10.0学习和总结

    由于中文参考资料很少,参考链接: https://www.oschina.net/translate/109-new-features-in-jdk-10 http://chuansong.me/n/ ...

  3. css3三角形冒泡泡图形制作

    图一: 图二: <!DOCTYPE html> <html> <head> <title>css 三角形</title> <style ...

  4. 【bzoj3747】[POI2015]Kinoman

    题解: 水题 从左向右维护以每一个作为右端点的最大值 线段树维护 代码: #include <bits/stdc++.h> using namespace std; #define rin ...

  5. 转:ubuntu-E:Encountered a section with no Package: header的解决办法

    http://blog.csdn.net/hs794502825/article/details/7835902 blog.csdn.net/lixiang0522/article/details/7 ...

  6. NOI2018Day2T1 屠龙勇士 set 扩展欧几里德 中国剩余定理

    原文链接https://www.cnblogs.com/zhouzhendong/p/NOI2018Day2T1.html 题目传送门 - 洛谷P4774 题意 题解 首先我们仔细看一看样例可以发现如 ...

  7. laydate时间组件

    laydate时间组件使用笔记 /*! laydate-v5.0.9 日期与时间组件 MIT License http://www.layui.com/laydate/ By 贤心 */ ;!func ...

  8. Ubuntu18.04上安装Docker CE

    建立 REPOSITORY 1.更新索引包 更新 /etc/apt/sources.list 和 /etc/apt/sources.list.d 中列出的源的地址,这样才能获取到最新的软件包 sudo ...

  9. window.location.replace和window.location.href区别

    有3个页面 a,b,c 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c 1:b->c 是通过window.location.replace("..xx/c ...

  10. HDFS常用API（1）

    一.HDFS集群API所需要jar包的maven配置信息 <dependency> <groupId>org.apache.hadoop</groupId> < ...