四、文件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标准新增了更多的属性和方法和事件
- 用来获取表单数据
- 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