web前端缓存openDatabase

最新推荐文章于 2024-09-08 22:12:40 发布

_沈

最新推荐文章于 2024-09-08 22:12:40 发布

阅读量1.5k

点赞数 2

分类专栏：笔记文章标签：数据库前端缓存

本文链接：https://blog.csdn.net/weixin_42988844/article/details/121222185

版权

笔记专栏收录该内容

20 篇文章 6 订阅

订阅专栏

openDatabase–>ts语法

// 这样就不必再App.module.ts 引入
@Injectable({
  providedIn: 'root'
})
export class DatabaseService {
    win: any = window;
    dataSource: any;
    constructor(
    ) {
        this.initDB();
    }
    
    // window.openDatabase("数据库名字", "版本","数据库描述",数据库大小);
    // executeSql函数有四个参数，其意义分别是：
    // 1）表示查询的字符串，使用的SQL语言是SQLite 3.6.19。（必选）
    // 2）插入到查询中问号所在处的字符串数据。（可选）
    // 3）成功时执行的回调函数。返回两个参数：tx和执行的结果。（可选）
    // 4）一个失败时执行的回调函数。返回两个参数：tx和失败的错误信息。（可选）
    
    // 创建数据库
    initDB() {
        // window.openDatabase("数据库名字", "版本","数据库描述",数据库大小);
        this.dataSource = this.win.openDatabase('myapp.db', 1, 'windos', 5 * 1024 * 1024);
    }
    
    // 创建mydata表
    createTable(){
        this.dataSource.transaction((tx) => {
            tx.executeSql('create table if not exists mydata(id varchar(32), name varchar(5242880))', []);
        });
    }
    
    // 插入数据
    insertData(sqlStr: any, sqlParams: any){
        this.dataSource.transaction((tx) => {
            tx.executeSql(sqlStr, sqlParams, 
            (tx, result) => {
                console.log('插入数据成功！！！');
            }, (tx, error) => {
                console.error('插入数据成功！！！');
            });
        });
    }
    
    // 删除数据
    deleteData(sqlStr: any, sqlParams: any){
        this.dataSource.transaction((tx) => {
            tx.executeSql(sqlStr, sqlParams, 
            (tx, result) => {
                console.log('删除数据成功！！！');
            }, (tx, error) => {
                console.error('删除数据成功！！！');
            });
        });
    }
    
    // 修改数据
    updateData(sqlStr: any, sqlParams: any){
        this.dataSource.transaction((tx) => {
            tx.executeSql(sqlStr, sqlParams, 
            (tx, result) => {
                console.log('修改数据成功！！！');
            }, (tx, error) => {
                console.error('修改数据成功！！！');
            });
        });
    }
    
    // 查询数据
    selectData(sqlStr: any, sqlParams: any){
        this.dataSource.transaction((tx) => {
            tx.executeSql(sqlStr, sqlParams, 
            (tx, result) => {
                console.log('查询数据成功！！！');
            }, (tx, error) => {
                console.error('查询数据成功！！！');
            });
        });
    }
    
}

openDatabase–>js语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
openDatabase与android里面的sqlite差不多
最好的选型存储
-->

<h1>opendatabse数据库操作</h1>

<button id="btn-create">创建user数据表</button>
<button id="btn-insert">插入数据</button>
<button id="btn-query">查询数据</button>
<button id="btn-update">修改数据</button>
<button id="btn-delete">删除数据</button>
<button id="btn-drop">删除user数据表</button>

<script type="text/javascript">

    let findId = id => document.getElementById(id);

    //模拟一条user数据
    let user = {
        username: "liuqiang",
        password: "123569874",
        info: "beaconApp开发团队中一员"
    };

    /**
     * 创建数据库 或者此数据库已经存在 那么就是打开数据库
     * name: 数据库名称
     * version: 版本号
     * displayName: 对数据库的描述
     * estimatedSize: 设置数据的大小
     * creationCallback: 回调函数(可省略)
     */
    let db = openDatabase("MySql", "1.0", "我的数据库描述", 1024 * 1024);
    let result = db ? "数据库创建成功" : "数据库创建失败";
    console.log(result);


    const USER_TABLE_SQL = "create table if not exists userTable (id integer primary key autoincrement,username varchar(12)," +
        "password varchar(16),info text)";

    //创建数据表
    function createTable() {
        db.transaction(tx => {
            tx.executeSql(USER_TABLE_SQL, [],
                (tx, result) => {
                    alert('创建user表成功:' + result);
                }, (tx, error) => {
                    alert('创建user表失败:' + error.message);
                })
        })
    }

    const INSERT_USER_SQL = "insert into userTable (username, password,info) values(?,?,?)";

    //插入数据
    function insertData(user) {
        db.transaction(tx => {
            tx.executeSql(INSERT_USER_SQL,
                [user.username, user.password, user.info],
                (tx, result) => {
                    alert('添加数据成功:');
                }, (tx, error) => {
                    alert('添加数据失败:' + error.message);
                })
        })
    }

    const QUERY_USER_SQL = "select * from userTable";

    //查询数据
    function queryData() {
        db.transaction(tx => {
            tx.executeSql(QUERY_USER_SQL, [],
                (tx, result) => {
                    console.log(result);
                },
                (tx, error) => {
                    console.log('查询失败: ' + error.message)
                })
        })
    }

    const UPDATE_USER_SQL = "update userTable set password = ? where username = ?";

    //修改数据
    function updateData(user) {
        db.transaction(tx => {
            tx.executeSql(UPDATE_USER_SQL, [user.password, user.username],
                (tx, result) => {
                    alert("修改数据成功")
                }, (tx, error) => {
                    alert("修改数据失败:" + error.message)
                })
        })
    }

    const DELETE_USER_SQL = "delete from userTable where username = ?";

    //删除数据
    function deleteData(user) {
        db.transaction(tx => {
            tx.executeSql(DELETE_USER_SQL, [user.username],
                (transaction, resultSet) => {
                    alert("删除数据成功")
                }, (transaction, error) => {
                    alert("删除数据失败:" + error.message)
                })
        });
    }

    const DROP_USER_SQL = "drop table userTable";

    //删除数据表
    function dropTable() {
        db.transaction(tx => {
            tx.executeSql(DROP_USER_SQL, [],
                (transaction, resultSet) => {
                    alert("删除数据表成功")
                }, (transaction, error) => {
                    alert("删除数据表失败:" + error.message)
                })
        })
    }

    /**
     * 点击事件 增删查改
     */
    let btnCreate = findId("btn-create");
    let btnInsert = findId("btn-insert");
    let btnQuery = findId("btn-query");
    let btnUpdate = findId("btn-update");
    let btnDelete = findId("btn-delete");
    let btnDrop = findId("btn-drop");
    btnCreate.onclick = () => createTable();
    btnInsert.onclick = () => insertData(user);
    btnQuery.onclick = () => queryData();
    btnUpdate.onclick = () => {
        user.password = "111666666"; //修改密码
        updateData(user);
    };
    btnDelete.onclick = () => deleteData(user);
    btnDrop.onclick = () => dropTable();

</script>
</body>
</html>