Author: 刘老师(Aaron Lau) 武汉长乐教育，武汉PHP培训课程，版权所有，转载请注明！

HTML5中的Web SQL数据库

本课摘要

1. 浏览器对Web SQL的支持情况
2. 使用Web SQL连接数据库
3. 插入数据
4. 查询数据
5. 删除数据
6. 修改数据
7. 完整示例

1. 浏览器对Web SQL的支持情况

点击查看

2. 使用Web SQL连接数据库

var dbInfo={
    dbName:"ShoppingCartDB",  //名称
    dbVersion:"0.1", //版本
    dbDisplayName:"Shopping Cart Database", //显示名称
    dbEstimatedSize:10*11024*1024  //大小(byte)
};

var db;     //定义一个db对象

//创建库
function createDB(){
    db = window.openDatabase(dbInfo.dbName , dbInfo.dbVersion ,dbInfo.dbDisplayName , dbInfo.dbEstimatedSize);
}

//创建表
function createShoppingCartTable(){
    db.transaction(function(tx){
        tx.executeSql(
            "CREATE TABLE IF NOT EXISTS ShoppingCart (Id TEXT PRIMARY KEY, Name TEXT, Price REAL,Count INTEGER,Desc TEXT)", [],
            function(){
                console.log('数据表创建成功' );
            }, dbError
        );
    });
}

//错误处理
function dbError(tx, error){
    console.error(error);
}

$(function(){
    //创建数据库和表
    createDB();
    createShoppingCartTable();
});

3. 插入数据

db.transaction(function(tx){
    tx.executeSql("INSERT INTO ShoppingCart " +
        "(Id, Name,Price,Count,Desc) VALUES (?,?,?,?,?)" ,
        [data.id, data.name,data.price,data.count,data.desc],
        function(tx, result){
            console.log("新增成功!");
        }, dbError
    );
});

4. 查询数据

db.transaction(function(tx){
    tx.executeSql("SELECT * FROM ShoppingCart" ,[],
        function(tx, result){
            for(var i=0;i<result.rows.length;i++){
                var item=result.rows.item(i);
                console.log(item);
            };
        },
        dbError
    );
});

5. 删除数据

db.transaction(function(tx){
    tx.executeSql("DELETE FROM ShoppingCart WHERE Id = ?" ,
        [id],
        function(tx, result){
            console.log("删除成功!");
        },
        dbError
    );
});

6. 修改数据

db.transaction(function(tx){
    tx.executeSql("UPDATE ShoppingCart SET Name = ? WHERE Id = ?" ,
        ["荔枝", "1"],
        function(tx, result){
            console.log("修改成功!");
        },
        dbError
    );
});

7. 完整示例

点击查看