html5整理-H5教程-PHP中文网

html5整理

巴扎黑

发布： 2016-12-05 10:57:43

原创

1421人浏览过

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()