IndexDB

/**
 * 1. 存储复杂的关系数据
 * 2. 储存类型多样: 字符串,数字,视频,图像等
 */
class IDB {
  constructor(dbName, version = 1) {
    this._db = null;
    this._indexedDB = window.indexedDB;
    this._dbName = dbName;
    this._version = version;
    this.stores = [];
  }
  cereteStore(store) {
    if (!this.stores.some((v) => v.name === store.name)) {
      this.stores.push(store);
    }
  }
  openDatabase() {
    return new Promise((resolve, reject) => {
      let request = this._indexedDB.open(this._dbName, this._version);
      request.onerror = () => {
        console.log("Database failed to open");
        reject({ code: 400, msg: "Database failed to open" });
      };
      request.onsuccess = () => {
        console.log("Database opened successfully");
        this._db = request.result;
        resolve(this, { code: 200, msg: "Database opened successfully" });
      };
      request.onupgradeneeded = (e) => {
        this._db = e.target.result;
        this.stores.forEach((store) => {
          if (!this._db.objectStoreNames.contains(store.name)) {
            store.__os__ = this._db.createObjectStore(store.name, {
              keyPath: store.keyPath || "id",
              autoIncrement: true,
            });
            if (store.indexs != undefined) {
              store.indexs.forEach((i) => {
                store.__os__.createIndex(i.indexName, i.keyPath, i.option);
              });
            }
          }
        });
        console.log("Database setup complete");
      };
    });
  }
  add(storeName, data, fn) {
    let transaction = this._db.transaction(storeName, "readwrite");
    let request = transaction.objectStore(storeName).add(data);
    request.onsuccess = (e) => {
      fn && fn({ id: e.target.result });
    };
    return new Promise((resolve, reject) => {
      transaction.oncomplete = () => {
        resolve(this, {
          code: 200,
          msg: "ransaction completed: database modification finished.",
        });
      };
      transaction.onerror = () => {
        reject({ code: 400, msg: "Transaction not opened due to error" });
      };
    });
  }
  del(storeName, id) {
    let transaction = this._db.transaction(storeName, "readwrite");
    transaction.objectStore(storeName).delete(id);
    return new Promise((resolve, reject) => {
      transaction.oncomplete = () => {
        resolve(this, {
          code: 200,
          msg: "ransaction completed: database modification finished.",
        });
      };
      transaction.onerror = () => {
        reject({ code: 400, msg: "Transaction not opened due to error" });
      };
    });
  }
  put(storeName, data, fn) {
    let transaction = this._db.transaction(storeName, "readwrite");
    let request = transaction.objectStore(storeName).put(data);
    request.onsuccess = (e) => {
      fn && fn({ id: e.target.result });
    };
    return new Promise((resolve, reject) => {
      transaction.oncomplete = () => {
        resolve(this, {
          code: 200,
          msg: "ransaction completed: database modification finished.",
        });
      };
      transaction.onerror = () => {
        reject({ code: 400, msg: "Transaction not opened due to error" });
      };
    });
  }
  get(storeName, id, fn) {
    let transaction = this._db.transaction(storeName, "readwrite");
    let request = transaction.objectStore(storeName).get(id);
    request.onsuccess = (e) => {
      fn && fn(e.target.result);
    };
    return new Promise((resolve, reject) => {
      transaction.oncomplete = () => {
        resolve(this, {
          code: 200,
          msg: "ransaction completed: database modification finished.",
        });
      };
      transaction.onerror = () => {
        reject({ code: 400, msg: "Transaction not opened due to error" });
      };
    });
  }
  getAll(storeName) {
    return new Promise((resolve, reject) => {
      let list = [];
      let cursor = this._db
        .transaction(storeName)
        .objectStore(storeName)
        .openCursor();
      cursor.onsuccess = (e) => {
        let cursor = e.target.result;
        if (cursor) {
          list.push(cursor.value);
          cursor.continue();
        } else {
          resolve({ code: 200, data: list });
        }
      };
      cursor.onerror = () => {
        reject({ code: 400, msg: "Failed to open the cursor" });
      };
    });
  }
}

window.onload = function () {
  const idb = new IDB("test_db");
  idb.cereteStore({
    name: "notes",
    keyPath: "id",
    indexs: [
      {
        indexName: "title",
        keyPath: "title",
        option: { unique: false },
      },
    ],
  });
  idb.openDatabase().then(() => {
    const note1 = { title: "20210716笔记", body: "20210716笔记1111111" };
    const note2 = { title: "20210717笔记", body: "20210717笔记1111111" };
    idb.add("notes", note1, ({ id }) => {
      console.log("插入一条新数据,id是: ", id);
      idb.del("notes", id);
    });
    idb.put("notes", note1, ({ id }) => {
      console.log("更新一条新数据,id是: ", id);
    });
    idb.getAll("notes").then((res) => console.log(res));
    idb.get("notes", 23, (res) => console.log(res));
  });
};

• Git History (git log) - View git log, file or line history.
  
• Project Manager - Easily switch between projects.
  
• GitLens - GitLens supercharges the built-in Visual Studio Code Git capabilities. It helps you to visualize code authorship at a glance via inline Git blame annotations and code lens, seamlessly navigate and explore the history of a file or branch, gain valuable insights via powerful comparision commands, and so much more.
  
• gitignore - Language support for .gitignore files. Lets you pull .gitignore files from the https://github.com/github/gitignore repository.
  
• Open in GitHub / Bitbucket / VisualStudio.com - Jump to a source code line in Github / Bitbucket / VisualStudio.com.