openDatabase 데이터베이스 웹 프런트엔드 캐시(코드 예)-HTML 튜토리얼-php.cn

openDatabase 데이터베이스 웹 프런트엔드 캐시(코드 예)

云罗郡主

풀어 주다： 2018-10-17 14:34:24

앞으로

2986명이 탐색했습니다.

이 기사의 내용은 openDatabase 데이터베이스 웹 프런트엔드 캐시(코드 예제)에 관한 것입니다. 특정 참고 가치가 있으므로 도움이 필요한 분들에게 도움이 되길 바랍니다.

이 데이터베이스 캐싱 API 학습에는 데이터베이스 연산문에 대한 기본 지식이 필요합니다. 데이터베이스문의 간단한 추가, 삭제, 확인, 수정을 이해하지 못하는 경우, 이를 시청하는 어린이용 신발을 권장합니다. 블로그를 먼저 Xiaoxiao로 이동하세요. 데이터베이스 문의 추가, 삭제, 수정 및 쿼리에 대해 알아보세요 이 문서는 add, delete의 기본 작업에 대한 예시일 뿐입니다. , 수정하고 데이터베이스 테이블을 쿼리하고 데이터베이스 테이블의 연결 작업을 수행하지 않지만 프런트 엔드 데이터 캐싱에 대한 모든 사람의 요구 사항 대부분을 충족합니다.

<!DOCTYPE html>
<html>
<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>

로그인 후 복사

위는 openDatabase 데이터베이스 웹 프런트 엔드 캐시(코드 예)에 대한 전체 소개입니다. 더 알고 싶다면 HTML 비디오 튜토리얼에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요.

위 내용은 openDatabase 데이터베이스 웹 프런트엔드 캐시(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!