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-2-Python文件操作

    Python文件操作(file) 文件操作的步骤: 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件(操作文件后记住关闭) 1.读写文件的基础语法: open() 将会返回一个 ...

  2. 437. 路径总和 III

    方法一:48 ms /* sumUp递归子程序求解以root为根节点的子节点之和为sum的路径数目; pathSum递归部分是把根节点逐一考察,如以root->left,以root->ri ...

  3. EF Core MYSQL 生成表映射配置问题

    Model表 public class Goods { public string ID { get; set; } public string CreatedBy { get; set; } pub ...

  4. 如何下载kubenetes最新的rpm包？

    一,新增aliyun的软件仓库 tee /etc/yum.repos.d/kubernetes.repo <<-'EOF' [kubernetes] name=Kubernetes bas ...

  5. java.net.UnknownHostException: master

    1:如果你报这个错误,第一反应应该是本地的host文件没有配置服务器名称和对应的ip地址,这个反应就对了.贴一下错误和解决方法: java.net.UnknownHostException: mast ...

  6. some advice in work

    给研究生的建议 文档抄袭自:北航大佬 Fei-Fei Li:De-Mystifying Good Research and Good Papers (repost) 如何提升你的能力?给年轻程序员的几 ...

  7. Multi label 多标签分类问题（Pytorch，TensorFlow，Caffe）

    适用场景:一个输入对应多个label,或输入类别间不互斥 调用函数: 1. Pytorch使用torch.nn.BCEloss 2. Tensorflow使用tf.losses.sigmoid_cro ...

  8. windows下面使用nssm设置新的服务实现开机自启等

    1.下载: http://nssm.cc/download/?page=download 2.解压: 根据自己的系统选择相应的32bit或者64bit,然后将相应的可执行文件拷贝到系统环境中.配置环境 ...

  9. 【AtCoder】AGC031

    A - Colorful Subsequence 答案是 \(\prod_{c = 'a'}^{'z'} (cnt[c] + 1)\) #include <bits/stdc++.h> # ...

  10. ip 命令

    Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.ifconfig是net-tools中已被废弃使用的一个命 ...