KevinBrother · KevinBrother · Nov 22, 2024 · Nov 22, 2024 · Nov 25, 2024 · Nov 25, 2024
diff --git a/js-advanced/indexed-db/README.md b/js-advanced/indexed-db/README.md
@@ -0,0 +1,56 @@
+# indexedDB
+
+## code
+
+``` bash
+tsc --watch index.ts
+```
+
+## 概念
+
+- 数据库：database
+  - 每个（ 协议 + 域名 + 端口） 可以创建任意多个数据库
+- 对象仓库：object store
+  - 每个数据库可以创建多个对象仓库，类似关系型数据库的表
+- 数据记录：record
+  - 类似关系型数据库的行
+- 索引：index
+  - 每个对象仓库可以创建多个索引
+
+## 打开数据库
+
+```js
+let openRequest = indexedDB.open(name, version);
+```
+
+## 增删改查
+
+- 增
+
+```js
+let addRequest = db.addRequest(objectStoreName, value);
+```
+
+- 删
+
+```js
+let deleteRequest = db.deleteRequest(objectStoreName, key);
+```
+
+- 改
+
+```js
+let updateRequest = db.updateRequest(objectStoreName, value);
+```
+
+- 查
+
+```js
+let getRequest = db.getRequest(objectStoreName, key);
+```
+
+## 事务
+
+```js
+let transaction = db.transaction([objectStoreName], mode);
+```
diff --git a/js-advanced/indexed-db/base/index.html b/js-advanced/indexed-db/base/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+  <script module src="index.js"></script>
+</body>
+</html>
diff --git a/js-advanced/indexed-db/base/index.js b/js-advanced/indexed-db/base/index.js
@@ -0,0 +1,102 @@
+// 创建/打开数据库
+function handlerUpgraded(event) {
+    const userTable = createObjectStore(event.target, "user-table");
+    console.log("userTable", userTable);
+    const nameIndex = createIndex(userTable, "name", "name", {
+        unique: true,
+    });
+    console.log("nameIndex", nameIndex);
+    createIndex(userTable, "age", "age");
+    queryRecord(userTable, 1)
+        .then((result) => {
+        console.log("记录查询成功", result);
+    })
+        .catch((error) => {
+        console.log("记录查询失败", error);
+    });
+}
+const openRequest = indexedDB.open("indexed-db-test", 3);
+openRequest.onerror = (event) => {
+    console.log("数据库打开失败", event.target.error);
+};
+openRequest.onsuccess = (event) => {
+    console.log("数据库打开成功", event.target.result);
+    const userTable = openRequest.result
+        .transaction("user-table", "readwrite")
+        .objectStore("user-table");
+    console.log("userTable", userTable);
+    queryRecord(userTable, 1)
+        .then((result) => {
+        console.log("记录查询成功", result);
+    })
+        .catch((error) => {
+        console.log("记录查询失败", error);
+    });
+    readAllRecord(userTable)
+        .then((result) => {
+        console.log("记录查询成功", result);
+    })
+        .catch((error) => {
+        console.log("记录查询失败", error);
+    });
+};
+openRequest.onupgradeneeded = (event) => {
+    console.log("数据库升级", event.target.result);
+    handlerUpgraded(event);
+};
+// 创建对象仓库(类似关系型数据库的表)
+function createObjectStore(openRequest, objectStoreName) {
+    // 增删改查需要通过事务来操作
+    // TODO: 如果对象仓库已经存在，则直接返回  这个判断无效
+    if (openRequest.result.objectStoreNames.contains(objectStoreName)) {
+        return openRequest.result
+            .transaction(objectStoreName, "readwrite")
+            .objectStore(objectStoreName);
+    }
+    return openRequest.result.createObjectStore(objectStoreName, {
+        keyPath: "id",
+        // autoIncrement: true
+    });
+}
+// 创建索引
+function createIndex(objectStore, indexName, keyPath, options) {
+    return objectStore.createIndex(indexName, keyPath, options);
+}
+// 增删改查
+function addRecord(objectStore, record) {
+    return new Promise((resolve, reject) => {
+        const request = objectStore.add(record);
+        request.onsuccess = (event) => {
+            //   console.log("记录添加成功", (event.target as IDBRequest).result);
+            resolve(event.target.result);
+        };
+        request.onerror = (event) => {
+            //   console.log("记录添加失败", (event.target as IDBRequest).error);
+            reject(event.target.error);
+        };
+    });
+}
+// 查询
+function queryRecord(objectStore, key) {
+    return new Promise((resolve, reject) => {
+        const request = objectStore.get(key);
+        request.onsuccess = (event) => {
+            resolve(event.target.result);
+        };
+        request.onerror = (event) => {
+            reject(event.target.error);
+        };
+    });
+}
+function readAllRecord(objectStore) {
+    return new Promise((resolve, reject) => {
+        const request = objectStore.getAll();
+        request.onsuccess = (event) => {
+            resolve(event.target.result);
+        };
+        request.onerror = (event) => {
+            reject(event.target.error);
+        };
+    });
+}
+export {};
diff --git a/js-advanced/indexed-db/base/index.ts b/js-advanced/indexed-db/base/index.ts
@@ -0,0 +1,135 @@
+// 创建/打开数据库
+function handlerUpgraded(event: Event) {
+  const userTable = createObjectStore(
+    event.target as IDBOpenDBRequest,
+    "user-table"
+  );
+
+  console.log("userTable", userTable);
+
+  const nameIndex = createIndex(userTable, "name", "name", {
+    unique: true,
+  });
+  console.log("nameIndex", nameIndex);
+  createIndex(userTable, "age", "age");
+
+  queryRecord(userTable, 1)
+    .then((result) => {
+      console.log("记录查询成功", result);
+    })
+    .catch((error) => {
+      console.log("记录查询失败", error);
+    });
+}
+
+const openRequest = indexedDB.open("indexed-db-test", 3);
+
+openRequest.onerror = (event) => {
+  console.log("数据库打开失败", (event.target as IDBOpenDBRequest).error);
+};
+
+openRequest.onsuccess = (event) => {
+  console.log("数据库打开成功", (event.target as IDBOpenDBRequest).result);
+
+  const userTable = openRequest.result
+    .transaction("user-table", "readwrite")
+    .objectStore("user-table");
+
+  console.log("userTable", userTable);
+  queryRecord(userTable, 1)
+    .then((result) => {
+      console.log("记录查询成功", result);
+    })
+    .catch((error) => {
+      console.log("记录查询失败", error);
+    });
+
+  readAllRecord(userTable)
+    .then((result) => {
+      console.log("记录查询成功", result);
+    })
+    .catch((error) => {
+      console.log("记录查询失败", error);
+    });
+};
+
+openRequest.onupgradeneeded = (event) => {
+  console.log("数据库升级", (event.target as IDBOpenDBRequest).result);
+  handlerUpgraded(event);
+};
+
+// 创建对象仓库(类似关系型数据库的表)
+function createObjectStore(
+  openRequest: IDBOpenDBRequest,
+  objectStoreName: string
+): IDBObjectStore {
+  // 增删改查需要通过事务来操作
+  // TODO: 如果对象仓库已经存在，则直接返回  这个判断无效
+  if (openRequest.result.objectStoreNames.contains(objectStoreName)) {
+    return openRequest.result
+      .transaction(objectStoreName, "readwrite")
+      .objectStore(objectStoreName);
+  }
+  return openRequest.result.createObjectStore(objectStoreName, {
+    keyPath: "id",
+    // autoIncrement: true
+  });
+}
+
+// 创建索引
+function createIndex(
+  objectStore: IDBObjectStore,
+  indexName: string,
+  keyPath: string,
+  options?: IDBIndexParameters
+) {
+  return objectStore.createIndex(indexName, keyPath, options);
+}
+
+// 增删改查
+function addRecord(objectStore: IDBObjectStore, record: any) {
+  return new Promise((resolve, reject) => {
+    const request = objectStore.add(record);
+
+    request.onsuccess = (event) => {
+      //   console.log("记录添加成功", (event.target as IDBRequest).result);
+      resolve((event.target as IDBRequest).result);
+    };
+
+    request.onerror = (event) => {
+      //   console.log("记录添加失败", (event.target as IDBRequest).error);
+      reject((event.target as IDBRequest).error);
+    };
+  });
+}
+
+// 查询
+function queryRecord(objectStore: IDBObjectStore, key: any) {
+  return new Promise((resolve, reject) => {
+    const request = objectStore.get(key);
+
+    request.onsuccess = (event) => {
+      resolve((event.target as IDBRequest).result);
+    };
+
+    request.onerror = (event) => {
+      reject((event.target as IDBRequest).error);
+    };
+  });
+}
+
+function readAllRecord(objectStore: IDBObjectStore) {
+  return new Promise((resolve, reject) => {
+    const request = objectStore.getAll();
+
+    request.onsuccess = (event) => {
+      resolve((event.target as IDBRequest).result);
+    };
+
+    request.onerror = (event) => {
+      reject((event.target as IDBRequest).error);
+    };
+  });
+}
+
+export {};
diff --git a/js-advanced/indexed-db/index.html b/js-advanced/indexed-db/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <script type="module" src="dist/index.js"></script>
+  </body>
+</html>
diff --git a/js-advanced/indexed-db/index.ts b/js-advanced/indexed-db/index.ts
@@ -0,0 +1,41 @@
+import {
+  createStore,
+  entries,
+  del,
+  getMany,
+  set,
+  get,
+  keys,
+  update,
+} from "idb-keyval";
+// store 和 table 是同一个概念
+const kssStore = createStore("kss-db", "kss-store");
+
+// 增删改查
+
+// 添加
+set("1", { name: "obj1", id: 1, age: 18 }, kssStore);
+set("2", { name: "obj1", id: 2, age: 18 }, kssStore);
+
+// 修改
+// update("kss-obj", (value) => ({ ...value, name: "obj3" }), kssStore);
+
+// 删除
+// del("kss-obj", kssStore);
+
+// 查询
+get("kss-obj", kssStore)
+  .then((value) => {
+    console.log("value", value);
+  })
+  .catch((error) => {
+    console.log("error", error);
+  });
+
+keys(kssStore).then((keys) => {
+  console.log("keys", keys);
+});
+
+entries(kssStore).then((entries) => {
+  console.log("entries", entries);
+});
diff --git a/js-advanced/indexed-db/package.json b/js-advanced/indexed-db/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "indexed-db",
+  "version": "1.0.0",
+  "description": "## code",
+  "main": "index.js",
+  "scripts": {
+    "tsc": "rm -rf dist && tsc --watch",
+    "build": "rollup -c",
+    "watch": "rollup -c -w"
+  },
+  "keywords": [],
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "tslib": {
+    "optional": true
+  },
+  "dependencies": {
+    "idb-keyval": "6.0.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "rollup": "^4.27.4",
+    "rollup-plugin-delete": "^2.1.0",
+    "tslib": "^2.8.1"
+  }
+}