From 9f70e104ce30ffb7889d4f0707cd30c0dcecb8ac Mon Sep 17 00:00:00 2001
From: caojunjie <1301239018@qq.com>
Date: Fri, 22 Nov 2024 17:20:43 +0800
Subject: [PATCH 1/6] db
---
js-advanced/indexed-db/README.md | 0
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 js-advanced/indexed-db/README.md
diff --git a/js-advanced/indexed-db/README.md b/js-advanced/indexed-db/README.md
new file mode 100644
index 0000000..e69de29
From 1d37e2878b7f3211f95e16c498397d91d1ce8ba9 Mon Sep 17 00:00:00 2001
From: caojunjie <1301239018@qq.com>
Date: Fri, 22 Nov 2024 18:58:03 +0800
Subject: [PATCH 2/6] feat(db)
---
js-advanced/indexed-db/README.md | 56 +++++++++++++
js-advanced/indexed-db/index.html | 11 +++
js-advanced/indexed-db/index.js | 101 +++++++++++++++++++++++
js-advanced/indexed-db/index.ts | 133 ++++++++++++++++++++++++++++++
4 files changed, 301 insertions(+)
create mode 100644 js-advanced/indexed-db/index.html
create mode 100644 js-advanced/indexed-db/index.js
create mode 100644 js-advanced/indexed-db/index.ts
diff --git a/js-advanced/indexed-db/README.md b/js-advanced/indexed-db/README.md
index e69de29..6efd1a8 100644
--- 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/index.html b/js-advanced/indexed-db/index.html
new file mode 100644
index 0000000..4a0b820
--- /dev/null
+++ b/js-advanced/indexed-db/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ Document
+
+
+
+
+
\ No newline at end of file
diff --git a/js-advanced/indexed-db/index.js b/js-advanced/indexed-db/index.js
new file mode 100644
index 0000000..0ec52b6
--- /dev/null
+++ b/js-advanced/indexed-db/index.js
@@ -0,0 +1,101 @@
+// 创建/打开数据库
+function handlerUpgraded(event) {
+ var userTable = createObjectStore(event.target, "user-table");
+ console.log("userTable", userTable);
+ var nameIndex = createIndex(userTable, "name", "name", {
+ unique: true,
+ });
+ console.log("nameIndex", nameIndex);
+ createIndex(userTable, "age", "age");
+ queryRecord(userTable, 1)
+ .then(function (result) {
+ console.log("记录查询成功", result);
+ })
+ .catch(function (error) {
+ console.log("记录查询失败", error);
+ });
+}
+var openRequest = indexedDB.open("indexed-db-test", 3);
+openRequest.onerror = function (event) {
+ console.log("数据库打开失败", event.target.error);
+};
+openRequest.onsuccess = function (event) {
+ console.log("数据库打开成功", event.target.result);
+ var userTable = openRequest.result
+ .transaction("user-table", "readwrite")
+ .objectStore("user-table");
+ console.log("userTable", userTable);
+ queryRecord(userTable, 1)
+ .then(function (result) {
+ console.log("记录查询成功", result);
+ })
+ .catch(function (error) {
+ console.log("记录查询失败", error);
+ });
+ readAllRecord(userTable)
+ .then(function (result) {
+ console.log("记录查询成功", result);
+ })
+ .catch(function (error) {
+ console.log("记录查询失败", error);
+ });
+};
+openRequest.onupgradeneeded = function (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(function (resolve, reject) {
+ var request = objectStore.add(record);
+ request.onsuccess = function (event) {
+ // console.log("记录添加成功", (event.target as IDBRequest).result);
+ resolve(event.target.result);
+ };
+ request.onerror = function (event) {
+ // console.log("记录添加失败", (event.target as IDBRequest).error);
+ reject(event.target.error);
+ };
+ });
+}
+// 查询
+function queryRecord(objectStore, key) {
+ return new Promise(function (resolve, reject) {
+ var request = objectStore.get(key);
+ request.onsuccess = function (event) {
+ resolve(event.target.result);
+ };
+ request.onerror = function (event) {
+ reject(event.target.error);
+ };
+ });
+}
+function readAllRecord(objectStore) {
+ return new Promise(function (resolve, reject) {
+ var request = objectStore.getAll();
+ request.onsuccess = function (event) {
+ resolve(event.target.result);
+ };
+ request.onerror = function (event) {
+ reject(event.target.error);
+ };
+ });
+}
diff --git a/js-advanced/indexed-db/index.ts b/js-advanced/indexed-db/index.ts
new file mode 100644
index 0000000..e17747a
--- /dev/null
+++ b/js-advanced/indexed-db/index.ts
@@ -0,0 +1,133 @@
+// 创建/打开数据库
+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);
+ };
+ });
+}
From 3a46160c6a761176518859ddd95544865b4ffc76 Mon Sep 17 00:00:00 2001
From: caojunjie <1301239018@qq.com>
Date: Mon, 25 Nov 2024 16:40:09 +0800
Subject: [PATCH 3/6] test
---
js-advanced/indexed-db/base/index.html | 11 ++
js-advanced/indexed-db/base/index.js | 101 ++++++++++++++++
js-advanced/indexed-db/base/index.ts | 135 ++++++++++++++++++++++
js-advanced/indexed-db/index.html | 16 +--
js-advanced/indexed-db/index.js | 118 ++++---------------
js-advanced/indexed-db/index.ts | 152 +++++--------------------
js-advanced/indexed-db/package.json | 16 +++
js-advanced/indexed-db/pnpm-lock.yaml | 29 +++++
js-advanced/indexed-db/tsconfig.json | 109 ++++++++++++++++++
9 files changed, 454 insertions(+), 233 deletions(-)
create mode 100644 js-advanced/indexed-db/base/index.html
create mode 100644 js-advanced/indexed-db/base/index.js
create mode 100644 js-advanced/indexed-db/base/index.ts
create mode 100644 js-advanced/indexed-db/package.json
create mode 100644 js-advanced/indexed-db/pnpm-lock.yaml
create mode 100644 js-advanced/indexed-db/tsconfig.json
diff --git a/js-advanced/indexed-db/base/index.html b/js-advanced/indexed-db/base/index.html
new file mode 100644
index 0000000..4a0b820
--- /dev/null
+++ b/js-advanced/indexed-db/base/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ Document
+
+
+
+
+
\ No newline at end of file
diff --git a/js-advanced/indexed-db/base/index.js b/js-advanced/indexed-db/base/index.js
new file mode 100644
index 0000000..0ec52b6
--- /dev/null
+++ b/js-advanced/indexed-db/base/index.js
@@ -0,0 +1,101 @@
+// 创建/打开数据库
+function handlerUpgraded(event) {
+ var userTable = createObjectStore(event.target, "user-table");
+ console.log("userTable", userTable);
+ var nameIndex = createIndex(userTable, "name", "name", {
+ unique: true,
+ });
+ console.log("nameIndex", nameIndex);
+ createIndex(userTable, "age", "age");
+ queryRecord(userTable, 1)
+ .then(function (result) {
+ console.log("记录查询成功", result);
+ })
+ .catch(function (error) {
+ console.log("记录查询失败", error);
+ });
+}
+var openRequest = indexedDB.open("indexed-db-test", 3);
+openRequest.onerror = function (event) {
+ console.log("数据库打开失败", event.target.error);
+};
+openRequest.onsuccess = function (event) {
+ console.log("数据库打开成功", event.target.result);
+ var userTable = openRequest.result
+ .transaction("user-table", "readwrite")
+ .objectStore("user-table");
+ console.log("userTable", userTable);
+ queryRecord(userTable, 1)
+ .then(function (result) {
+ console.log("记录查询成功", result);
+ })
+ .catch(function (error) {
+ console.log("记录查询失败", error);
+ });
+ readAllRecord(userTable)
+ .then(function (result) {
+ console.log("记录查询成功", result);
+ })
+ .catch(function (error) {
+ console.log("记录查询失败", error);
+ });
+};
+openRequest.onupgradeneeded = function (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(function (resolve, reject) {
+ var request = objectStore.add(record);
+ request.onsuccess = function (event) {
+ // console.log("记录添加成功", (event.target as IDBRequest).result);
+ resolve(event.target.result);
+ };
+ request.onerror = function (event) {
+ // console.log("记录添加失败", (event.target as IDBRequest).error);
+ reject(event.target.error);
+ };
+ });
+}
+// 查询
+function queryRecord(objectStore, key) {
+ return new Promise(function (resolve, reject) {
+ var request = objectStore.get(key);
+ request.onsuccess = function (event) {
+ resolve(event.target.result);
+ };
+ request.onerror = function (event) {
+ reject(event.target.error);
+ };
+ });
+}
+function readAllRecord(objectStore) {
+ return new Promise(function (resolve, reject) {
+ var request = objectStore.getAll();
+ request.onsuccess = function (event) {
+ resolve(event.target.result);
+ };
+ request.onerror = function (event) {
+ reject(event.target.error);
+ };
+ });
+}
diff --git a/js-advanced/indexed-db/base/index.ts b/js-advanced/indexed-db/base/index.ts
new file mode 100644
index 0000000..27e17de
--- /dev/null
+++ 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 {};
\ No newline at end of file
diff --git a/js-advanced/indexed-db/index.html b/js-advanced/indexed-db/index.html
index 4a0b820..244572a 100644
--- a/js-advanced/indexed-db/index.html
+++ b/js-advanced/indexed-db/index.html
@@ -1,11 +1,11 @@
-
-
-
+
+
+
Document
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+