95后码农——H5本地存储之二Web SQL在前端中的运用

1、什么是Web SQL

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。
WebSQL是客户浏览器端的结构化的关系数据库。这是浏览器内部的本地RDBMS，你可以在这个本地RDBMS上执行SQL查询。

2、Web SQL的概念

Web数据库属于深度Web（Deep Web）的一种资源形势，通常指在互联网中以Web查询接口方式访问的数据库资源，其结构是后台采用数据库管理系统存储数据信息，对外提供包含表单的Web页面作为访问接口，查询结果也以包含数据列表的Web页面形式返回给用户。
        Web数据库的数据相比搜索引擎返回的查询结果，特点是提供一个或多个领域的数据记录，且具有完整的模式信息。
        Web数据库集成的主要目的是为用户提供多个Web数据库资源的统一访问方式。现有的Web数据库集成方式可以分为三类：
　　（1）数据供应模式；
　　（2）数据收集模式；
　　（3）元搜索模式。

3、Web SQL的使用

创建一个数据库

这里就不过多解释了哈，就是创建一个新的数据库，定义数据库的变量名称。后面的insert语句是为了给数据库初始添加两条数据。

const db = openDatabase('mydb', '1.0', 'Test', 2 * 1024 * 1024);
    // 创建表
    db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS USERS (id integer primary key AutoIncrement, name, person,mo)');
        tx.executeSql('INSERT INTO USERS (id, name, person,mo) VALUES (?, ?, ?,?)',[101,'三维扫描仪', 'XS-154','测量部门']);
        tx.executeSql('INSERT INTO USERS (id, name, person,mo) VALUES (?, ?, ?,?)',[102,'时钟发生器', 'CE-2621','项目部']);
    });

刷新函数

这个函数主要是在页面加载的时候，包括操作完数据以后，都需要调用的函数。

this.refresh();
    function template(id,name,person,mo) {
        let trDom = document.createElement('tr');
        let idDom = document.createElement('td');
        idDom.innerText = id;
        let nameDom = document.createElement('td');
        nameDom.innerText = name;
        let personDom = document.createElement('td');
        personDom.innerText = person;
        let moDom = document.createElement('td');
        moDom.innerText = mo;
        let actionDom = document.createElement('td');
        let actionButtonEdit = document.createElement('button');
        actionButtonEdit.innerText = '编辑';
        actionButtonEdit.setAttribute("onclick",'edit(' + id +',"' + name +'","' + person +'","' + mo +'")');
        let actionButtonDel = document.createElement('button');
        actionButtonDel.innerText = '删除';
        actionButtonDel.setAttribute("onclick",'del(' + id +')');
        actionDom.appendChild(actionButtonEdit);
        actionDom.appendChild(actionButtonDel);
        trDom.appendChild(idDom);
        trDom.appendChild(nameDom);
        trDom.appendChild(personDom);
        trDom.appendChild(moDom);
        trDom.appendChild(actionDom);
        return trDom
    }

新增函数

新增数据的同时需要将数据传入数据库当中，运用SQL语句tx.executeSql(‘INSERT INTO USERS (name,person,mo) VALUES (?,?,?)’, [name,person,mo]);，这样就可以实现数据库的数据的更新。但是数据新增之后，界面不会随即进行更新，在执行完新增函数后，调用==refresh()==函数，

function add() {
    console.log("添加");
    let dom = document.getElementById('addName');
    let dom2 = document.getElementById('addPerson');
    let dom3 = document.getElementById('addMo');
    let name = dom.value;
    let person = dom2.value;
    let mo = dom3.value;
    // console.log("姓名",name);
    // console.log("规格型号",person);
    db.transaction(function (tx) {
        tx.executeSql('INSERT INTO USERS (name,person,mo) VALUES (?,?,?)', [name,person,mo]);
        // console.log("数据新增成功");
        // tx.executeSql('INSERT INTO USERS (person) VALUES (?)', [person]);
        dom.value = '';
        dom2.value = '';
        dom3.value = '';
    });
    this.refresh()
}

修改函数

function edit(id,name,person,mo) {
    var modal = document.querySelector(".edit");
    modal.style.display = "block";
    console.log("编辑",id);
    this.editId = id;
    let dom = document.getElementById('editName');
    let dom2 = document.getElementById('editPerson');
    let dom3 = document.getElementById('editMo');
    dom.value = name;
    dom2.value = person;
    dom3.value = mo;

    // modal.style.display = "none";
}

function save() {
    console.log("保存");
    if(this.editId){
        let dom = document.getElementById('editName');
        let dom2 = document.getElementById('editPerson');
        let dom3 = document.getElementById('editMo');
        console.log("保存",this.editId,dom.value,dom2.value,dom3.value);
        let name = dom.value;
        let person = dom2.value;
        let mo = dom3.value;
        // tx.executeSql('UPDATE STUDENT SET name = ?,sex = ?,age=? WHERE id=?',[name,sex,age,id]);
        let sql = "UPDATE USERS SET name='" + name + "', person = '"+ person +"', mo = '"+ mo +"' WHERE id=" + this.editId;
        console.log("sql",sql);
        db.transaction(function (tx) {
            tx.executeSql(sql)
        });
        this.editId = '';
        dom.value = '';
        dom2.value = '';
        dom3.value = '';
        this.refresh()
    }else{
        alert("请先选择编辑项")
    }
}

删除函数

function del(id) {
    console.log("删除",id);
    db.transaction(function (tx) {
        tx.executeSql('DELETE FROM USERS WHERE id=?', [id])
    });
    this.refresh()
}

项目代码地址：点击此处进入下载地址，欢迎下载并指正