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