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 -
内容格式 (以 结束， 时行结束符)
data:内容 data:内容 -
字段
- data
- id
- retry
- event
WebSocket
概述
- 真正的实时通信
- 双工通信
- socket协议直接建立在TCP协议上
- 不存在同源策略
客户端 WebSocket
- 方法
- send()
- close()
- 事件
- onmessage
- onopen
- onerror
node.js 使用socket模块
- socket.io
- node-websocket
- ws