html 5のローカルストレージローカルデータベース操作

html SQLLITEファイル型SQLデータベースの操作方法
1.データベースにアクセスするオブジェクトの作成
var db=openDatabase("mydb",'1.0','test db',102400)
最初のパラメータはデータベース名
2番目のパラメータはバージョン番号です
3番目のパラメータはデータベースの説明です
4番目のパラメータ・データベースのサイズ
2.取引の使用
db.transaction(function(tx){
tx.executeSql(sqlQuery,[],dataHandler,errorHandler);
});
tx.executeSql(sqlQuery,[],dataHandler,errorHandler)
最初のパラメータは実行するsql文です
2番目のパラメータはsql文で使用されるパラメータ配列です.
3番目のパラメータは、sqlの実行に成功したときに呼び出されるコールバック関数です.
4番目のパラメータは、sqlの実行に失敗したときに呼び出されるコールバック関数です.

function addData(name,email,phone){
		db.transaction(function(tx){
			tx.executeSql(' insert into msgData values(?,?,?)',[name,email,phone],function(tx,rs){
				alert("    ！");
				},function(tx,error){
					alert(error.message);
					});
			});
		}

sqlliteデータベース操作の例

//           
 var datatable = null; 
  
 //          
 //4           ,   ，      ，      
 var db = openDatabase('MyData','','My Database',102400); 
  
 //init()  ，             ，             
 function init(){ 
    //         ，          
    datatable = document.getElementById("datatable"); 
     
    //                 
    showAllData(); 
 } 
  
 //removeAllData()  ，                 （          ） 
 function removeAllData(){ 
    //  ，  <table>             
    //  ，     datatable       
    for(var i=datatable.childNodes.length-1;i>=0;i--){ 
        datatable.removeChild(datatable.childNodes(i)); 
    } 
     
    //      ，            <tr>     <th> 
    //           
    var tr= document.createElement('tr'); 
    //          
    var th1=document.createElement('th'); 
    //          
    var th2=document.createElement('th'); 
    //          
    var th3=document.createElement('th'); 
    //   3       
    th1.innerHTML="  "; 
    th2.innerHTML="  "; 
    th3.innerHTML="  "; 
    //              
    tr.appendChild(th1); 
    tr.appendChild(th2); 
    tr.appendChild(th3); 
    //                
    datatable.appendChild(tr); 
 } 
  
 //              HTML  。    ：              
 function showData(row){ 
     //                  
     var tr= document.createElement('tr'); 
     //     ，       
     var td1=document.createElement('td'); 
     //            name 
     td1.innerHTML=row.name; 
     //     ，       
     var td2=document.createElement('td'); 
     //            message 
     td2.innerHTML=row.info; 
    //     ，       
     var td3=document.createElement('td'); 
     //         
     var t = new Date(); 
     t.setTime(row.time); 
     //                         
     td3.innerHTML=t.toLocaleString()+" "+t.toLocaleTimeString(); 
     //           
     tr.appendChild(td1); 
     tr.appendChild(td2); 
     tr.appendChild(td3); 
     //              
     datatable.appendChild(tr); 
 } 
  
 //                ，              
 function showAllData(){ 
    //  SQLite     ,                     
    db.transaction(function(tx){ 
        //           ，   3    
        tx.executeSql('CREATE TABLE IF NOT EXISTS InfoData(name TEXT,info TEXT,time INTEGER)',[]); 
        //                     （         ，              (     )） 
        //           ，           
        tx.executeSql('SELECT * FROM InfoData',[],function(tx,rs){ 
             
            //     ，  ，            <table>      
            removeAllData(); 
            //     ，     ，    showData  table      html   
            for(var i=0;i<rs.rows.length;i++){ 
                //  item(i)，        ，              （     HTML  ） 
                showData(rs.rows.item(i)); 
            } 
        }); 
    } 
  
    ); 
 } 
  
 //                 ，             ，        。 
 function addData(name,info,time){ 
    //          
    //               ，          InfoData ，                  
    db.transaction(function(tx){ 
         
        //            
        //                     
        tx.executeSql('INSERT INTO InfoData VALUES(?,?,?)' , [name,info,time],function(tx,rs){ 
            console.log("      !"); 
        }, 
        //                       
        function(tx,error){ 
            console.log(error.source+"::"+error.message); 
        }); 
    } 
     
    ); 
 } 
  
 //         ，          ”  “          
 function saveData(){ 
    // HTML     2        
    var name=document.getElementById('name').value; 
    var info=document.getElementById('info').value; 
    //          
    var time= new Date().getTime(); 
    //    ，    ，           
    addData(name,info,time); 
    //    <p id="msg">      
    showAllData(); 
 } 

htmlコード:

<!DOCTYPE html> 
<head> 
<meta charset="UTF-8"> 
<title>  HTML5     DEMO</title> 
<script type="text/javascript" src="js/operateDB.js"></</script> 
</head> 
 
<body onload="init();"> 
<h1>  HTML5     DEMO</h1> 
<table> 
    <tr><td>  ：</td><td><input type="text" id="name"></td></tr> 
    <tr><td>  ：</td><td><input type="text" id="info"></td></tr> 
    <tr> 
        <td></td> 
        <td><input type="button" value="  " onclick="saveData();"></td> 
    </tr> 
</table> 
<hr> 
<table id="datatable" border="1"></table> 
<p id="msg"></p> 
</body>