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