html 5 本地数据库（Web Sql Database）

最新推荐文章于 2023-12-24 23:25:49 发布

yusirxiaer

最新推荐文章于 2023-12-24 23:25:49 发布

阅读量564

点赞数

分类专栏： HTML5 文章标签： html5 openDatabase transaction executeSql

本文链接：https://blog.csdn.net/yusirxiaer/article/details/77993359

版权

HTML5 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

基于HTML5的Web DataBase 可以让你在浏览器中进行数据持久地存储管理和有效查询，假设你的离线应用程序有需要规范化的存储功能

本文讲述如何使用核心方法openDatabase、transaction、executeSql

1.新建一个网页，比如：test.html 内容如下：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
 <title>web sql database</title>  
 <script type='text/javascript' src='jquery-1.4.3.js'></script>   
 <script type="text/javascript">  
 $(function(){  
         if (!window.openDatabase) {    
            alert("不支持");  
         }    
         else {    
             initDB();    
             createTables();               
         }     
 function initDB(){    
     var shortName = 'localDB';    
     var version = '1.0';    
     var displayName = 'localDB table';    
     var maxSize = 655350; // in bytes    
     //window.openDatabase("数据库名字", "版本","数据库描述",数据库大小);  
     localDB = window.openDatabase(shortName, version, displayName, maxSize);    
 }     
 function createTables(){    
     var query = 'CREATE TABLE IF NOT EXISTS user(id INTEGER NOT NULL, username TEXT NOT NULL);';    
     try {    
         localDB.transaction(function(transaction){    
             transaction.executeSql(query, [], null, null);       
         });    
     }     
     catch (e) {    
     console.log("create table failed");  
        alert("建表失败");  
         return;    
     }    
 }    
 });  
 function btnClick(){  
  var username = $("#username").val();  
   try {    
         localDB.transaction(function(transaction){  
             transaction.executeSql("insert into user(id,username) values(?,?)", [1,username]);    
         });       
     }     
     catch (e) {    
     console.log("insert into failed");  
        alert("插入失败");  
         return;    
     }   
     console.log("insert into success");  
   //alert("insert into success");  
  }  
  function btnSelect(){  
  localDB.transaction(function(tx) {  
  tx.executeSql("select * from user", [],    
   function(tx, result) {  
   $("#result").empty();  
    for(var i = 0; i < result.rows.length; i++){   
    $("#result").append('<b>' +result.rows.item(i)['id']+"------" +result.rows.item(i)['username']+ '</b><br />');   
   }   
  }, function(){  
   alert("error");  
  });   
 });  
  }  
 </script>  
 </head>  
 <body>  
     <div id="my" style="height:100px;width:200px;border:1px solid red;">    
     <input type="text" name="username" id="username" value=""/>  
     <br/>  
     <button onclick="btnClick()">insert</button>  
     </div>  
     <div id="my1" style="height:300px;width:200px;border:1px solid red;">  
     <button onclick="btnSelect()">select</button>  
    <div id="result" style="height:300px;width:200px;border:1px solid blue;">  
       </div>  
     </div>  
 </body>  
 </html>  