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