我的家園
          
			我的家園
		          		
	
          

          

          

          


          		
	
          
	
          
		
			
		
		
			
          
				
					
	
          
		
          
			
          
				HTML 5 Web SQL核心三叉戟
			
          
 			Posted on 2012-04-15 16:37 zljpp 閱讀(126) 評論(0)  編輯  收藏  
			
			


		
          
		
          Web SQL數據庫API實際上未包含在HTML 5規范之中，它是一個獨立的規范，它引入了一套使用SQL操作客戶端數據庫的API。假設你是一名優秀的Web開發人員，那毫無疑問，你對SQL和數據庫的相關概念已經很熟悉了，如果你對SQL不熟悉，那在繼續閱讀本文之前，最好先學習一下SQL相關的教程。
          

          最新版本的Chrome，Safari和Opera瀏覽器都支持Web SQL數據庫。
          

          核心方法
          

          本文將介紹規范中定義的三個核心方法：
          

          1、openDatabase：這個方法使用現有數據庫或創建新數據庫創建數據庫對象。
          

          2、transaction：這個方法允許我們根據情況控制事務提交或回滾。
          

          3、executeSql：這個方法用于執行真實的SQL查詢。
          

          打開數據庫
          

          openDatabase方法打開一個已經存在的數據庫，如果數據庫不存在，它還可以創建數據庫，創建并打開數據庫的語法如下：
          

            
     
          1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
            2. 

          

          上面的openDatabase方法使用了下面五個參數：
          

          1、數據庫名（mydb）
          

          2、版本號（1.0）
          

          3、描述（Test DB）
          

          4、數據庫大小（2*1024*1024）
          

          5、創建回調
          

          最后一個，即第五個參數“創建回調”，在創建數據庫時會調用它，但即使沒有這個參數，一樣可以在運行時創建數據庫。
          

          執行查詢
          

          執行查詢使用database.transaction()函數，它只需要一個參數，下面是一個真實的查詢語句：
          

            
     
          1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
            2. 
     
          2. db.transaction(function (tx) {    
            3. 
     
          3.    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
            4. 
     
          4. }); 
            5. 

          

          上面的查詢將會在“mydb”數據庫中創建一個LOGS表。
          

          插入操作
          

          為了向表中插入新記錄，我們在上面的查詢語句中添加了一個簡單的SQL查詢，修改后的語句如下：
          

            
     
          1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
            2. 
     
          2. db.transaction(function (tx) {  
            3. 
     
          3.    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
            4. 
     
          4.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');  
            5. 
     
          5.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');  
            6. 
     
          6. }); 
            7. 

          

          在插入新記錄時，我們還可以傳遞動態值，如：
          

            
     
          1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
            2. 
     
          2. db.transaction(function (tx) {    
            3. 
     
          3.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
            4. 
     
          4.   tx.executeSql('INSERT INTO LOGS   
            5. 
     
          5.                         (id,log) VALUES (?, ?'), [e_id, e_log];  
            6. 
     
          6. }); 
            7. 

          

          這里的e_id和e_log是外部變量，executeSql在數組參數中將每個項目映射到“?”。
          

          讀操作
          

          如果要讀取已經存在的記錄，我們使用一個回調捕獲結果，代碼如下：
          

            
     
          1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
            2. 
     
          2. db.transaction(function (tx) {  
            3. 
     
          3.    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
            4. 
     
          4.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');  
            5. 
     
          5.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');  
            6. 
     
          6. });  
            7. 
     
          7. db.transaction(function (tx) {  
            8. 
     
          8.    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {  
            9. 
     
          9.    var len = results.rows.length, i;  
            10. 
     
          10.    msg = "<p>Found rows: " + len + "</p>";  
            11. 
     
          11.    document.querySelector('#status').innerHTML +=  msg;  
            12. 
     
          12.    for (i = 0; i < len; i++){  
            13. 
     
          13.       alert(results.rows.item(i).log );  
            14. 
     
          14.    }  
            15. 
     
          15.  }, null);  
            16. 
     
          16. }); 
            17. 

          

          完整的例子
          

          最后，我們在一個完整的HTML 5文檔中展現前面講述的內容，同時使用瀏覽器來解析這個HTML 5文檔。
          

            
     
          1. <!DOCTYPE HTML> 
            2. 
     
          2. <html> 
            3. 
     
          3. <head> 
            4. 
     
          4. <script type="text/javascript"> 
            5. 
     
          5. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
            6. 
     
          6. var msg;  
            7. 
     
          7. db.transaction(function (tx) {  
            8. 
     
          8.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
            9. 
     
          9.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');  
            10. 
     
          10.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');  
            11. 
     
          11.   msg = '<p>Log message created and row inserted.</p>';  
            12. 
     
          12.   document.querySelector('#status').innerHTML =  msg;  
            13. 
     
          13. });  
            14. 
     
          14.  
            15. 
     
          15. db.transaction(function (tx) {  
            16. 
     
          16.   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {  
            17. 
     
          17.    var len = results.rows.length, i;  
            18. 
     
          18.    msg = "<p>Found rows: " + len + "</p>";  
            19. 
     
          19.    document.querySelector('#status').innerHTML +=  msg;  
            20. 
     
          20.    for (i = 0; i < len; i++){  
            21. 
     
          21.      msg = "<p><b>" + results.rows.item(i).log + "</b></p>";  
            22. 
     
          22.      document.querySelector('#status').innerHTML +=  msg;  
            23. 
     
          23.    }  
            24. 
     
          24.  }, null);  
            25. 
     
          25. });  
            26. 
     
          26. </script> 
            27. 
     
          27. </head> 
            28. 
     
          28. <body> 
            29. 
     
          29. <div id="status" name="status">Status Message</div> 
            30. 
     
          30. </body> 
            31. 
     
          31. </html> 
            32. 

          

          下面是在最新版本的Safari或Opera瀏覽器中產生的輸出結果。
          

            
     
          1. Log message created and row inserted.  
            2. 
     
          2.  
            3. 
     
          3. Found rows: 2  
            4. 
     
          4.  
            5. 
     
          5. foobar  
            6. 
     
          6.  
            7. 
     
          7. logmsg 
            8. 

          

          
	
          


          
	    
    




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
			
          
		          		
	
          
	
          
		
			

		
	
          

          


    







          
        
	




主站蜘蛛池模板：
大丰市|
句容市|
浮梁县|
峨眉山市|
麦盖提县|
聊城市|
普洱|
鄂伦春自治旗|
房山区|
富阳市|
潼南县|
巧家县|
海丰县|
潮安县|
从化市|
渑池县|
高尔夫|
鹤山市|
大余县|
哈巴河县|
海门市|
巫山县|
衡南县|
安徽省|
宜兰县|
邛崃市|
白城市|
沛县|
大竹县|
宁海县|
游戏|
阿合奇县|
横峰县|
宜川县|
绍兴县|
新余市|
龙门县|
旬阳县|
凌源市|
临沂市|
绵竹市|