【HTML5】HTML5本地数据库（Web Sql Database）

 

 

Web Sql数据库简介

Web SQL数据库API实际上不是HTML5规范的组成部分，而是单独的规范。它通过一套API来操纵客户端的数据库。

Web SQL数据库的浏览器支持情况

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

Web SQL创建的数据库在哪儿

 

这要依据你使用的浏览器的数据存储位置，默认是在安装目录的User Data文件夹。

 

---

html5创建的是一个sqllite数据库，用SQLiteSpy打开文件，可以看到里面的数据。SQLiteSpy是一个绿色软件，可以百度一下下载地址或SQLiteSpy官方下载。

 

---

 

打开数据库

 

 

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

openDatabase() 方法对应的五个参数说明：
1. 数据库名称
2. 版本号
3. 描述文件
4. 数据库大小
5. 创建回调，该参数会再创建数据库后被调用

创建表

tx.executeSql('CREATE TABLE LOGS (id unique, log)');

注：
1.创建表的命令不能单独使用，必须要和插入数据或是查询数据搭配使用，否则会报错。
2.有些地方写的格式是类似这样的

dataBase.transaction( function(tx) { 
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)", 
[], 
function(tx,result){ alert('创建stu表成功'); }, 
function(tx, error){ alert('创建stu表失败:' + error.message); 
});
});

不过自己试了试，发现function(tx,result){}和function(tx,error) {}除了前者在查询语句中起了作用，其余的语句都没有任何作用。

插入数据

         var pid = 2;
         var id = 3;
         var plog = "www.success.com";
         var log = "www.jame.com";
         db.transaction(function (tx) {
            //创建表
            tx.executeSql('DROP TABLE IF EXISTS LOGS');
            tx.executeSql('CREATE TABLE LOGS (id unique, log)');
            //静态插入数据
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "www.honor.com")');
            //动态插入数据
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (?, ?)',[pid,plog]);
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (?, ?)',[id,log]);
         });

注：
1.处理数据的格式都有两种，分别为静态的和动态的。
2.在使用动态方法的时候需要注意语法

删除数据

 

         var did = 1;
         db.transaction(function (tx) {
              tx.executeSql('DELETE FROM LOGS  WHERE id='+did);
         });

或

db.transaction(function (tx)){tx.executeSql('DELETE FROM LOGS WHERE id = 1');

 

更新数据

 

         var uid = 2;
         db.transaction(function (tx) {
             tx.executeSql('UPDATE LOGS SET log=\'www.successful.cc\' WHERE id='+uid);
         });

或

         db.transaction(function (tx) {tx.executeSql('UPDATE LOGS SET log=\'www.successful.cc\' WHERE id=2');});

查询数据

查询语句结构：

db.transaction(function (tx) {
            tx.executeSql('inquire statement',
             [],
             function (tx, results) {
             //put your code
             }
             },
             null);
         });

查询所有信息：

        var msg;
         db.transaction(function (tx) {
            //查询所有信息
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
               var i;
               var len;
               //获得记录总数
               len  = results.rows.length;
               msg = "<p>查询记录条数: " + len + "</p>";
               //获得id为"status"的第一个标签
               document.querySelector('#status').innerHTML +=  msg;

               //获得每一个记录
               for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                  document.querySelector('#status').innerHTML +=  msg;
               }
            }, null);
         });

注：
1.document.querySelector(‘#status’)
    该函数将获得id值为status的第一个标签。
2.id为status的标签如下：

<div id="status" name="status"></div>

参考文章

 

HTML5 Web SQL
HTML5教程之html 5 本地数据库（Web Sql Database）