html5整理

HTML5新的Input类型 
输入类型：color,data,datetime,datetime-local,email,month,number,range,search,tel,time,url,week 
HTML Web存储 localStorage 
没有时间限制的数据存储 
以键/值对的形式表示 
setItem(),getItem() 
localStorage.name="Smith"; 
sessionStorage 
当用户关闭浏览器窗口时，数据会被删除 
以键/值对的形式表示 
setItem(),getItem() 
sessionStorage.setItem('name','smith'); 
Web SQL数据库（略） 
核心方法： 
openDatabase 使用现有的数据库或新建的数据库创建一个数据库对象 
transaction 这个方法使我们能够控制一个事务，以及基于这种情况执行提交或者回滚 
executeSql 这个方法用于执行实际的SQL查询 
一个完整实例 
 
 
 
 

 
 
 
 
 
复制代码 
应用程序缓存（略） 
如需启用应用程序缓存，请在文档的标签中包含manifest属性： 
 
 
... 
 
复制代码 
Manifest文件 
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存 
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面） 
完整的Manifest文件实例 
CACHE MANIFEST 
# 2012-02-21 v1.0.0 
/theme.css 
/logo.gif 
/main.js 
NETWORK: 
login.php 
FALLBACK: 
/html/ /offline.html 
复制代码 
Web Workers 
web worker是运行在后台的javascript,独立于其他脚本，不会影响页面的性能 
function startWorker(){ 
if(typeof(Worker) != "undefined"){ 
if(typeof(w) == "undefined"){ 
w=new Worker('demo_worker.js'); 
} 
w.onmessage=function(event){ 
document.getElementById('result').innerHTML=event.data; 
}; 
} 
} 
function stopWorker(){ 
w.terminate(); 
w = undefined; 
} 
复制代码 
/*demo_worker.js*/ 
var i=0; 
function timedCount(){ 
i=i+1; 
postMessage(i); 
setTimeout('timedCount()',500); 
} 
timedCount(); 
复制代码 
服务器发送事件（SSE） 
Server-Sent 事件指的是网页自动获取来自服务器的更新。 
WebSocket 
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。 
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。 
var Socket = new WebSocket(url, [protocal]) 
WebSocket属性 
Socket.readyState 
0 - 表示连接尚未建立 
1 - 表示连接已建立，可以进行通信 
2 - 表示连接正在进行关闭 
3 - 表示连接已经关闭或者连接不能打开 
WebSocket事件 
Socket.onopen - 连接建立时触发 
Socket.onmessage - 客户端接收服务端数据时触发 
Socket.onerror - 通信发生错误时触发 
Socket.onclose - 连接关闭时触发 
WebSocket方法 
Socket.send() 
Socket.close()