websql 和 indexedDB本地存储

websq

 // 创建|打开
 var db = openDatabase("person", 1, "test", 0); // '数据库名 版本号 描述 存储容量限制'
 // 创建表
 db.transaction((tx) => {
   tx.executeSql("create table if not exists student (id unique,name)");
 });
 // 新增数据
 db.transaction((tx) => {
   tx.executeSql("insert into student (id,name) values (?,?)", [1, "张三"]);
   tx.executeSql("insert into student (id,name) values (?,?)", [2, "李四"]);
 });

 // 查找数据
 db.transaction((tx) => {
   tx.executeSql("select * from student", [], (tx, res) => {
     const rows = res.rows;
     Object.values(rows).forEach((item) => {
       console.log(item);
       // {id: 1, name: '张三'}
       // {id: 2, name: '李四'}
     });
   });
 });
 // updata delete

indexedDB

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。

// 打开数据库
  var request = window.indexedDB.open("db", 1);

  var db;
  request.onsuccess = function (event) {
    db = request.result;
    console.log("数据库打开成功");
    get();
  };

  request.onerror = function (event) {
    console.log("数据库打开报错");
  };

  // 新建对象仓库（即新建表）
  request.onupgradeneeded = function (event) {
    db = event.target.result;
    var objectStore;
    if (!db.objectStoreNames.contains("person")) {
      objectStore = db.createObjectStore("person", { keyPath: "id" });
    }
    console.log("person created");
  };

  // 新增数据 db是异步执行的 注意先后顺序
  function add() {
    const req = db
      .transaction(["person"], "readwrite")
      .objectStore("person")
      .add({ id: 3, name: "王五", age: 24, email: "zhangsan@example.com" });

    req.onsuccess = function (event) {
      console.log("数据写入成功");
    };
    req.onerror = function (event) {
      console.log("数据写入失败");
    };
  }

  // 修改
  function updata() {
    db.transaction(["person"], "readwrite")
      .objectStore("person")
      .put({ id: 1, name: "张三", age: 24, email: "zhangsan@example.com" });
  }

  // 删除
  function deleted() {
    db.transaction(["person"], "readwrite").objectStore("person").delete(1);
  }

  // 查找
  function get() {
    const res = db
      .transaction(["person"], "readwrite")
      .objectStore("person")
      .get(1);

    res.onsuccess = function (e) {
      console.log(res.result);
    };
  }