H5 新API 续

Web存储

localStorage

sessionStorage

localStorage和sessionStorage 以及 cookie的区别？

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

应用程序缓存 Application Cache

浏览器缓存

应用程序缓存概述

• 能够作离线浏览
• 缓存页面，提升浏览速度

使用

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

manifest文件

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

applicationCache对象

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

子窗口跨域传值

• window.postMessage(text, origin)

• window.addEventListener("message", function(){})

  注意

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

• 子窗口把消息发给父窗口， 相反

Web Workers

简述

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

Worker API

• 方法
  • postMessage()
  • terminate()
• 事件
  * message

Ajax同源策略

定义

• ajax要求客户端的协议、主机名、端口号 与 服务端必须一致
• 同源测试是客户端的限制

解决方案

• CORS （跨域资源共享）
• 使用jsonp

CORS实现思路

• 设置响应头 "Access-Control-Allow-Origin" 为 容许访问的客户端地址（协议、主机名、端口号）。 能够设置为 *

JSONP

• 利用script元素 的src 加载url
• 能够实现跨域访问

CORS和JSONP的不一样

• CORS仍是标准的ajax，能够进行ajax的各类操做
• jsonp只能发起get请求

WebRTC

navigator.getUserMedia(options, successCallback, errCallback)

服务器推送

解决方案

• ajax 轮询
• Server-Send-Event
  
• WebSocket

服务器推送技术

• 服务器主动向客户端推送消息

• 传统的HTTP协议传输，服务器是别动响应客户端的请求

  解决方案

• ajax轮询 、 ajax长轮询
• Server-Sent Event

• WebSocket

ajax轮询

• 客户端定时 向服务器发送请求
• 可能会形成无用的http请求

ajax长轮询

• 客户端向服务器发送请求，服务器等到有更新后在给出响应。客户端收到更新后在发起新的请求
• 每一个请求都有更新结构，没有无用的http请求
• 仍然产生了大量的http连接

Server-Sent Event

概述

• 基于HTTP协议
• H5新增的API标准

客户端 EventSource

• 事件
  • onopen
  • onmessage
  • onerror
• 方法
  • close()
• 属性
  * readyState
  * url

服务端

• 设置响应头

  Content-type：text/event-stream
    Cache-Control : no-cache
    Connection : keep-alive

• 内容格式 (以\n\n结束， \n时行结束符)

  data:内容\n
    data:内容\n\n

• 字段
  • data
  • id
  • retry
  • event

WebSocket

概述

• 真正的实时通讯
• 双工通讯
• socket协议直接创建在TCP协议上
• 不存在同源策略

客户端 WebSocket

• 方法
  • send()
  • close()
• 事件
  • onmessage
  • onopen
  • onerror

node.js 使用socket模块

• socket.io
• node-websocket
• ws