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