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

向右看齐 2021-09-14 05:36 224阅读 0赞

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

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

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

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.  **<****meta** http-equiv="Content-Type" content="text/html; charset=gbk" **/>**  
5.  **<****title****>**web sql database**</****title****>**  
6.  **<****script** type='text/javascript' src='jquery-1.4.3.js'**>****</****script****>**   
7.  **<****script** type="text/javascript"**>**  
8.  $(function()\{  
9.          if (!window.openDatabase) \{    
10.            alert("不支持");  
11.         \}    
12.         else \{    
13.             initDB();    
14.             createTables();               
15.         \}     
16. function initDB()\{    
17.     var shortName = 'localDB';    
18.     var version = '1.0';    
19.     var displayName = 'localDB table';    
20.     var maxSize = 655350; // in bytes    
21.     //window.openDatabase("数据库名字", "版本","数据库描述",数据库大小);  
22.     localDB = window.openDatabase(shortName, version, displayName, maxSize);    
23. \}     
24. function createTables()\{    
25.     var query = 'CREATE TABLE IF NOT EXISTS user(id INTEGER NOT NULL, username TEXT NOT NULL);';    
26.     try \{    
27.         localDB.transaction(function(transaction)\{    
28.             transaction.executeSql(query, \[\], null, null);       
29.         \});    
30.     \}     
31.     catch (e) \{    
32.     console.log("create table failed");  
33.        alert("建表失败");  
34.         return;    
35.     \}    
36. \}    
37. \});  
38. function btnClick()\{  
39.  var username = $("\#username").val();  
40.   try \{    
41.         localDB.transaction(function(transaction)\{  
42.             transaction.executeSql("insert into user(id,username) values(?,?)", \[1,username\]);    
43.         \});       
44.     \}     
45.     catch (e) \{    
46.     console.log("insert into failed");  
47.        alert("插入失败");  
48.         return;    
49.     \}   
50.     console.log("insert into success");  
51.   //alert("insert into success");  
52.  \}  
53.  function btnSelect()\{  
54.  localDB.transaction(function(tx) \{  
55.  tx.executeSql("select \* from user", \[\],    
56.   function(tx, result) \{  
57.   $("\#result").empty();  
58.    for(var i = 0; i **<** **result.rows.length**; i++)\{   
59.    $("\#result").append('**<****b****>**' +result.rows.item(i)\['id'\]+"------" +result.rows.item(i)\['username'\]+ '**</****b****>****<****br** **/>**');   
60.   \}   
61.  \}, function()\{  
62.   alert("error");  
63.  \});   
64. \});  
65.  \}  
66. **</****script****>**  
67. **</****head****>**  
68. **<****body****>**  
69.     **<****div** id="my" style="height:100px;width:200px;border:1px solid red;"**>**    
70.     **<****input** type="text" name="username" id="username" value=""**/>**  
71.     **<****br****/>**  
72.     **<****button** onclick="btnClick()"**>**insert**</****button****>**  
73.     **</****div****>**  
74.     **<****div** id="my1" style="height:300px;width:200px;border:1px solid red;"**>**  
75.     **<****button** onclick="btnSelect()"**>**select**</****button****>**  
76.    **<****div** id="result" style="height:300px;width:200px;border:1px solid blue;"**>**  
77.       **</****div****>**  
78.     **</****div****>**  
79. **</****body****>**  
80. **</****html****>**

2.注意引入js文件哦

3.已经ok，直接打开网页浏览 ,用谷歌浏览器，然后 按 F12键 查看 Application --Web SQL 下面有新建的数据库以及表

[view plain]: http://blog.csdn.net/qyf_5445/article/details/8148309#