作为前端数据持久化的一种方案(关系型数据库)可惜只有谷歌支持https://www.w3.org/TR/webdatabase/

IndexedDB的nosql数据库 https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

核心语法

openDatabase 创建新数据库或者打开现有的数据库

transaction 创建事务

executeSql 执行SQL

openDatabase 用法

    const db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    const db = openDatabase('数据库名称', '版本号', '描述文本', '大小',回调方法);

transaction 事务执行

    db.transaction((tx)=>{
      
    }

executeSql SQL语句(增删改查)

需要注意的是事务的执行是异步的

增

创建名为LOGS 的表

unique 约束为唯一值

CREATE TABLE IF NOT EXISTS 表名 (列名称1 PRIMARY KEY,列名称2 UNIQUE ,列名称3)

db.transaction((tx)=>{
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
}

增加条目

单条新增

    INSERT INTO 表名 VALUES (?,?,?,?,?,?,?)
    INSERT INTO 表名 (key1,key2) VALUES (value1,value2)  静态
    INSERT INTO LOGS (id,log) VALUES (?,?)",[e_id,e_log]) 动态 
    `INSERT INTO LOGS (id,log) VALUES (${e_id},${e_log})` ES6

    //静态
    db.transaction((tx)=>{
      tx.executeSql("INSERT INTO LOGS (id,log) VALUES (1,'今天')")
    }
    //动态
    db.transaction((tx)=>{
      const e_id=2,e_log='明天'
      tx.executeSql("INSERT INTO LOGS (id,log) VALUES (?,?)",[e_id,e_log])  
      tx.executeSql(`INSERT INTO LOGS (id,log) VALUES (${e_id},${e_log})`)  //ES6
    }

多条

    INSERT INTO 表名 (key1,key2) VALUES (value1,value1),(value2,value2),(value3,value3)

    db.transaction((tx)=>{
      tx.executeSql("INSERT INTO LOGS (id,log) VALUES (1,'昨天'),(2,'今天')(3,'明天')") 
    })

删

删除表

    DROP TABLE 表名

    db.transaction((tx)=>{
      tx.executeSql('DROP TABLE LOGS')
    }

清空表

    'DELETE FROM 表名'

    db.transaction((tx)=>{
      tx.executeSql('DELETE FROM LOGS')
    }

删除条目

    DELETE FROM 表名 WHERE id=1 静态
    DELETE FROM 表名 WHERE id=?',[id] 动态
    `DELETE FROM 表名 WHERE id=${id}` ES6

    db.transaction((tx)=>{
       tx.executeSql('DELETE FROM LOGS WHERE id=1')
       tx.executeSql('DELETE FROM LOGS WHERE id=?',[id])
       tx.executeSql(`DELETE FROM LOGS WHERE id=${id}`)
    }

改

批量修改

UPDATE LOGS SET key=内容 

单条需要加条件否则批量修改

UPDATE LOGS SET key=内容 WHERE id=2

//多条
db.transaction((tx)=>{
    tx.executeSql("UPDATE LOGS SET log='星期天'")
})
//单条
db.transaction((tx)=>{
    tx.executeSql("UPDATE LOGS SET log='星期天'  WHERE id=1 ")
})

查

查表

SELECT * FROM LOGS //

db.transaction((tx)=>{
    tx.executeSql("SELECT * FROM LOGS ",[],function(tx,results){
    console.log(tx,results)
   })
})

查询条件

     db.transaction((tx)=>{
        tx.executeSql("SELECT * FROM LOGS where id LIKE  '2%'",[],function(tx,results){
          console.log(tx,results)
        })
      })

兼容表