Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
核心方法
以下是规范中定义的三个核心方法：
- openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
- transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
- executeSql：这个方法用于执行实际的 SQL 查询。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>javascript</title>
6 <style type="text/css">
7
8 </style>
9 </head>
10 <body>
11 <div id="status" name="status">状态信息</div>
12 </body>
13 </html>
14 <script type="text/javascript">
15 /*
16 *openDatabase：使用现有的数据库或者新建的数据库创建一个数据库对象
17 *openDatabase方法对应的五个参数说明：1 数据库名称 2 版本号 3 描述文本 4 数据库大小 5 创建回调(创建回调会在创建数据库后被调用)
18 * */
19 var db = openDatabase(‘mydb‘, ‘1.0‘, ‘Test DB‘, 2 * 1024 * 1024);
20 var msg;
21 /*
22 * transaction这个方法让我们能够控制一个事物,以及基于这种情况执行提交或者回滚。
23 * executeSql这个方法用于执行实际的SQL查询。
24 * 语句执行后会在mydb数据库中创建一个名为LOGS的表。
25 * */
26 db.transaction(function (tx) {
27 tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS1 (id unique, log)‘);
28 tx.executeSql(‘INSERT INTO LOGS1 (id, log) VALUES (1, "nihao1")‘);//插入数据
29 tx.executeSql(‘INSERT INTO LOGS1 (id, log) VALUES (2, "nihao2")‘);//插入数据
30 msg = ‘<p>数据表已创建，且插入了两条数据。</p>‘;
31 document.querySelector(‘#status‘).innerHTML = msg;
32 });
33
34 /*
35 * 如何读取数据库中已经存在的数据
36 * */
37 db.transaction(function (tx) {
38 tx.executeSql(‘SELECT * FROM LOGS1‘, [], function (tx, results) {
39 var len = results.rows.length, i;
40 msg = "<p>查询记录条数: " + len + "</p>";
41 document.querySelector(‘#status‘).innerHTML += msg;
42
43 for (i = 0; i < len; i++){
44 msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
45 document.querySelector(‘#status‘).innerHTML += msg;
46 }
47 }, null);
48 });
49 </script>
效果截图：
时间： 2024-10-04 11:20:17