H5新增的API

本地存储

sessionStorage、localStorage

File API

H5在DOM中为文件输入元素添加了一个files集合,在选择了一或多个文件时,files集合中将包含一组File对象,每个File对象对应着一个文件。每个File对象都有下列只读属性:

name: 本地文件系统的文件名;
size: 文件的字节大小;
type:字符串,文件的MIME类型;
lastModifiedDate:字符串,文件上一次被修改的事件(只有chrome实现了这个属性);

FlieReader

FlieReader类型实现的是一种异步文件读取机制。可以把FileReader想象成XMLHttpRequest,区别只是它读取的是本地文件,而不是远程服务器。为了读取文件中的数据,FileReader提供了如下几个方法:
readAsText(file, encoding):方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式);
readAsDataURL(file):可以获取一段data:base64的字符串;
readAsArrayBuffer(file):读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中;
由于读取过程是异步的,因此FileReader也提供了几个事件。其中最有用的三个事件是progress、error和load,分别表示是否又读取了新数据,是否发生了错误以及是否读完了整个文件。

对象URL

objectURL = URL.createObjectURL(object);

object是用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象;

返回值一个指向object的带hash的url字符串,这个URL的生命仅存在于它被创建的这个文档里;、

可以实现本地的图片预览

Web Worker

专用Web Worker提供可一个简单的方法使的web内容能够在后台运行脚本。一旦worker创建后,它可以向由它的创建者指定的事件监听函数传递消息,这样改worker生成的所有任务就都会接收到这个消息。worker线程能够在不干扰UI的情况下执行任务

创建一个新的worker十分简单。就是调用Worker()构造函数,指定一个要在worker线程内运行的脚本的URI,如果希望能够收到worker的通知,可以将worker的onmessage属性设置成一个特定的事件处理函数,如果希望能够发送信息到worker,可以使用postmessage方法。
 
关于Web Worker,最重要的是要知道它所执行的JavaScript代码完全在另一个作用域,与当前网页中的代码不共享作用域。在Web Worker中,同样有一个全局对象和其他对象以及方法。但是Web Worker中的代码不能访问DOM,也无法通过任何方式影响页面的外观。 Web Worker中的全局对象是worker对象本身。

history对象

h5中的history对象新增了两个新方法:history.pushState()和history.replaeState(); 两种方法都允许我们添加和更新历史记录,它们的工作原理相同并且可以添加数量相同的参数。但是pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。除了这两个方法之外,还有popstate 事件可以监听URL的改变。

cancas和svg

原文:https://www.jianshu.com/p/85e04dbb76b6

原文地址:https://www.cnblogs.com/xjy20170907/p/12802969.html