六月婷婷综合激情-六月婷婷综合-六月婷婷在线观看-六月婷婷在线-亚洲黄色在线网站-亚洲黄色在线观看网站

明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

openDatabase數據庫web前端緩存（代碼案例）

發(fā)表時間：2023-08-30 來源：明輝站整理相關軟件相關文章人氣：

[摘要]本篇文章給大家?guī)淼膬热菔顷P于openDatabase數據庫web前端緩存（代碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。本次數據庫緩存的api學習要求對數據庫操作語句有點基礎認知，如果不了解數據庫語句的簡單的增刪查改的話，建議觀看此篇博客的童鞋先去小小的了解一下數據庫...
本篇文章給大家?guī)淼膬热菔顷P于openDatabase數據庫web前端緩存（代碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

本次數據庫緩存的api學習要求對數據庫操作語句有點基礎認知，如果不了解數據庫語句的簡單的增刪查改的話，建議觀看此篇博客的童鞋先去小小的了解一下數據庫語句的增刪改查，本文也只是對數據庫表的增刪改查的基本操作的實例演示，并沒有做一些數據庫表的關聯操作，但滿足大家對前端數據緩存的大多數要求。

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

<!--
openDatabase與android里面的sqlite差不多
最好的選型存儲
-->

<h1>opendatabse數據庫操作</h1>

<button id="btn-create">創(chuàng)建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開發(fā)團隊中一員"
    };

    /**
     * 創(chuàng)建數據庫 或者此數據庫已經存在 那么就是打開數據庫
     * name: 數據庫名稱
     * version: 版本號
     * displayName: 對數據庫的描述
     * estimatedSize: 設置數據的大小
     * creationCallback: 回調函數(可省略)
     */
    let db = openDatabase("MySql", "1.0", "我的數據庫描述", 1024 * 1024);
    let result = db ? "數據庫創(chuàng)建成功" : "數據庫創(chuàng)建失敗";
    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)";

    //創(chuàng)建數據表
    function createTable() {
        db.transaction(tx => {
            tx.executeSql(USER_TABLE_SQL, [],
                (tx, result) => {
                    alert('創(chuàng)建user表成功:' + result);
                }, (tx, error) => {
                    alert('創(chuàng)建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數據庫web前端緩存（代碼實例）的全部介紹，如果您想了解更多有關HTML視頻教程，請關注PHP中文網。

以上就是openDatabase數據庫web前端緩存（代碼實例）的詳細內容，更多請關注php中文網其它相關文章！


網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
主站蜘蛛池模板： 青草草在线观看免费视频 | 午夜手机福利 | 午夜视频体验区 | 日韩一级欧美一级 | 欧美综合在线播放 | 青青草原在线视频免费观看 | 无需付费免费mv网站 | 四虎国产精品免费五月天 | 亚洲图片国产日韩欧美 | 我要看一级黄色 | 日韩中文一区 | 日本久久免费大片 | 亚洲成人免费网址 | 亚洲最新在线观看 | 四虎国产一区二区三区 | 色迷迷网免费站视频在线观看 | 日本最新伦中文字幕 | 中文字幕日本一区波多野不卡 | 日韩中文字幕视频在线 | 青青青草免费 | 香蕉依人| 婷婷国产 | 亚洲一一在线 | 亚洲另类电击调教在线观看 | 日本一区二区在线免费观看 | 亚洲aa | 亚洲天堂一区二区 | 亚洲男人第一天堂 | 一级做性色a爰片久久毛片 一级做受视频免费是看美女 | 五月婷婷深爱 | 欧美在线不卡视频 | 午夜影院免费看 | 青青草原在线免费 | 日韩播放 | 日本黄又粗暴一进一出抽搐文 | 青青草视频在线观看免费 | 日本爱爱小视频 | 天天狠天天透天天伊人 | 天堂国产在线观看 | 亚洲专区在线播放 | 亚洲视频在线播放 |