html5整理（三）

时间 2019-11-15

标签 html5 html 整理栏目 HTML5 繁體版

原文原文链接

HTML5新的Input类型

输入类型：color,data,datetime,datetime-local,email,month,number,range,search,tel,time,url,weekjavascript

HTML Web存储

localStorage

没有时间限制的数据存储php
以键/值对的形式表示css
setItem(),getItem()
localStorage.name="Smith";html

sessionStorage

当用户关闭浏览器窗口时，数据会被删除java
以键/值对的形式表示web
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>

应用程序缓存（略）

如需启用应用程序缓存，请在文档的<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()