HTML5API（2）

四、文件API

1、概述

• H5允许JS有条件的读取客户端文件
• 允许读取的文件：1.待上传的文件2.拖进浏览器的文件
• 多文件上传设置属性multiple
• 过滤上传文件类型
• 设置accept属性
  
  accept='image/jpg'
  
  accept='image/*'
  
  

2、FileList对象

• 由File对象构成的集合（类数组对象）
• FileList对象是File对象组成的数组
• type为file的input元素的属性files为FileList对象

3、File对象

• name
• size
• type
• lastModified
• lastModifiedDate

4、FileReader对象

• 01、方法
• readAsText()
• readAsDataURL()
• 属性
• error
• readyState
• result
• 事件
• onload
• onloadstart当读取操作将要开始之前调用
• onloadend操作完成时调用
• onerror
• onabort当读取操作被终止时调用
• onprogress
  
  在读取数据过程中周期调用

五、XHR2

1、概念

• XMLHttpRequest对象，用于发起http请求
• H5标准新增了更多的属性和方法和事件

2、FormData

• 用来获取表单数据
• http请求（post方式），请求体编码方式application/x-www-form-urlencoded ||| multipart/form-data
• XMLHttpRequest默认的请求体编码方式multipart/form-data
• 创建FormData对象可以把form元素作为参数，也可以没有参数创建空的formdata
• FormData对象调用append()在原来内容基础上添加新的内容

3、XMLHTTPRequest对象新增的属性、方法、事件

• 01、方法
• open()
• send()
• abort()
• 02、属性
• responseText
• responseXML
• readyState
• status
• 03、事件
• onreadystatechange

4、progressEvent

• loaded
• total
• lengthComputable长度是否可计算

5、XMLHttpRequestUpload

• onload
• onloadstart
• onloadend
• onprogress
• onerror
• onabort
• ontimeout

六、Web存储

1、localStorage

2、sessionStorage

3、localStorage和sessionStorage以及cookie区别？

• 数据都存储在浏览器上
• cookie可以被后端读取，localStorage和sessionStorage只能在前端应用
• cookie的有效期可以设置，localStorage有效期无法设置，一直到被删除，sessionStorage有效期无法设置，浏览器关闭销毁。

七、应用程序缓存Application Cache

1、浏览器缓存

2、应用程序缓存概述

• 可以做离线浏览
• 缓存页面，提高浏览速度

3、使用

• html标签mainfest属性引入一个文件
• 设置mainfest文件
• 使用applicationCache对象操作

4、manifest文件

CACHE MANIFEST
#version 0.0.2
CACHE：
需要缓存的文件列表
NETWORK:
不需要缓存的文件列表
FALLBACK
./  ./offline.html

5、applicationCache对象

• 事件
• checking
• noupldate
• downloading
• progress
• cached缓存完成第一次触发
• updateready更新完成
• 方法
• update

九、子窗口跨域传值

1、window.postMessage(text,origin)

2、window.addEventListener("message",function(){})

3、注意

• 父窗口把消息传递给子窗口：在父窗口文件中获取子窗口window对象，子窗口window调用postMessage() 子窗口文件中window监听message
• 子窗口把消息发给父窗口，

十、Web Workers

1、概述

• Worker可以开辟一个新的进程，进行一些比较复杂的运算
• 两个进程间可以互相通信

2、Worker API

• 方法
• postMessage（）
• terminate（）
• 事件
• message