html5整理
程序员文章站
2022-04-01 18:28:41
...
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查询
一个完整实例
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>
复制代码
应用程序缓存（略）
如需启用应用程序缓存，请在文档的标签中包含manifest属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
复制代码
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()
输入类型：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查询
一个完整实例
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>
复制代码
应用程序缓存（略）
如需启用应用程序缓存，请在文档的标签中包含manifest属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
复制代码
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()