H5 websql实例

最新推荐文章于 2023-12-24 23:25:49 发布

xxslll

最新推荐文章于 2023-12-24 23:25:49 发布

阅读量715

点赞数

分类专栏： h5 文章标签： html websql js

本文链接：https://blog.csdn.net/sinat_22032171/article/details/69220633

版权

h5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文通过一个实例介绍HTML5的本地存储技术Websql的使用方法，结合JavaScript进行数据库操作，包括创建数据库、创建表、插入数据、查询数据等步骤。

摘要由CSDN通过智能技术生成

html:

<div>
    <input type="text" id="data_insert" name="name">
    <button id="insert">新增</button>
</div>
    <!-- <div><input type="text" id="data_search" name="search"><button id="search">查找</button></div> -->
<div>
    <p>数据库数据</p>
    <div id="websql_show"></div>
</div>

js:

var Dbfunc = {};
    //  创建数据库
    Dbfunc.createdb = function(dbname){
        return openDatabase( dbname , '1.0', 'Test DB', 2 * 1024 * 1024);
    }
    // 插入数据
    Dbfunc.insertdb = function(db,dbform,formid,formname,valueid,valuename,func){
        var _self = Dbfunc;
        var str = 'CREATE TABLE IF NOT EXISTS '+ dbform +' (id unique, ' + formname + ')';
        var stra = 'INSERT INTO '+ dbform +' (id, ' + formname + ') VALUES (' + valueid + ', "' + valuename + '")';
        _self.createdb(db).transaction(function (tx) {
            tx.executeSql(str);
            tx.executeSql(stra);
            func();
        });
    }
    // insertdb('testdb','','testform','7','testname7');
    //  查找数据
    Dbfunc.searchdb = function(db,dbform,func){
        var _self = Dbfunc;
        _self.createdb(db).transaction(function (tx) {
            tx.executeSql('SELECT * FROM ' + dbform, [], function (tx, results) {
                // console.log(results.rows);
                func(results.rows);
            }, null);
        });
    }
    // Dbfunc.searchdb('test','testdb',function(){});
    //  删除数据
    Dbfunc.delectedb = function(db,dbform,dbid,func){
        var _self = Dbfunc;
        _self.createdb(db).transaction(function(tx) {
            tx.executeSql('DELETE FROM ' + dbform + ' WHERE id=?', [dbid]);
            func();
        });
    }
    // delectedb('test','testdb',5);
    //  修改数据
    Dbfunc.updatadb = function(db,dbform,dbid,dbname,dbupdata,func){
        var _self = Dbfunc;
        _self.createdb(db).transaction(function(tx) {
            tx.executeSql('UPDATE '+dbform+' SET '+dbname+'=\''+dbupdata+'\' WHERE id=?', [dbid]);
            func();
        });
    }
    // updatadb('test','testdb',1,'testform','dbupdata1');




    //  实例 查找遍历
    var num = 0;
    var websqlShow = document.getElementById("websql_show");
    showdatabase = function(){
        Dbfunc.searchdb('test','testdb',function(results){
            websqlShow.innerHTML = "";
            var table = document.createElement("table");
            table.setAttribute("border","1");
            table.innerHTML = "<tr><td>id</td><td>名字</td><td>操作</td><td>操作</td></tr>"
            var maxnum = 0;
            for (var i = 0; i < results.length; i++) {
                var tr = document.createElement("tr");
                tr.innerHTML = '<td>' + results[i].id + '</td><td>' + results[i].testform + '</td><td><button class="del">删除</button></td><td><input type="text" name="change" /><button class="change">修改</button></td>';
                table.appendChild(tr);
                if(results[i].id > maxnum){
                    maxnum = results[i].id;
                }
            }
            num = maxnum;
            websqlShow.appendChild(table);

            ctrl();
        });
    }
    showdatabase();

    //  实例 新增
    var insert = document.getElementById("insert");
    var data_insert = document.getElementById("data_insert");
    insert.onclick = function(){
        var id = num+1;
        if(data_insert.value){
            Dbfunc.insertdb('test','testdb','','testform',id,data_insert.value,function(){
                showdatabase();
            })
        }else{
            alert("空值");
        }
    }

    ctrl = function(){
        var del = document.getElementsByClassName("del");
        var change = document.getElementsByClassName("change");
        var del_arr = [];
        var change_arr = [];
        for (var i = 0; i < del.length; i++) {
            del_arr[i] = function(x){
                del[x].onclick = function(){
                    Dbfunc.delectedb('test','testdb',parseInt(this.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML),function(){
                        showdatabase();
                    });
                }
            }
            del_arr[i](i);

            change_arr[i] = function(x){
                change[x].onclick = function(){
                    Dbfunc.updatadb('test','testdb',parseInt(this.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML),'testform',this.parentNode.getElementsByTagName("input")[0].value,function(){
                        showdatabase();
                    });
                }
            }
            change_arr[i](i);
        }           
    }


    //  实例 目标查找
    // var search = document.getElementById("search");
    // var data_search = document.getElementById("data_search");
    // search.onclick = function(){
    //  if(data_search.value){
    //      Dbfunc.insertdb('test','testdb','','testform',id,data_insert.value,function(){
    //          showdatabase();
    //      })
    //  }else{
    //      alert("空值");
    //  }
    // }