From 801e4989d190381172b7f688c1b4bfaa0df4ae69 Mon Sep 17 00:00:00 2001 From: FengFan Date: Wed, 18 Mar 2020 03:09:30 +0800 Subject: [PATCH] chore: rename indexedDB --- README.md | 4 ++-- packages/player/src/index.ts | 4 ++-- packages/utils/src/index.ts | 2 +- packages/utils/src/store/{data.ts => idb.ts} | 12 ++++++------ 4 files changed, 11 insertions(+), 11 deletions(-) rename packages/utils/src/store/{data.ts => idb.ts} (87%) diff --git a/README.md b/README.md index c0d7c4b2..5b1fcc94 100644 --- a/README.md +++ b/README.md @@ -194,7 +194,7 @@ const elementList: [HTMLElement, string][] = [ Gzip一般是在网络应用层里对传输数据进行压缩,但是我们的数据不一定只存在数据库里,可能会有三种储存方式 1. 服务器存储 TCP => DB -2. 本地储存 localStorage、indexDB、web SQL +2. 本地储存 localStorage、indexedDB、web SQL 3. 保存为本地文件,例如直接导出可运行的HTML文件 利用客户端的运算能力,在进行导出或者传输之前,可以对数据进行压缩,极大程度的减小体积 @@ -205,7 +205,7 @@ Gzip一般是在网络应用层里对传输数据进行压缩,但是我们的 ##### 数据上传 -对于客户端的数据,可以利用浏览器提供的IndexDB进行存储,毕竟IndexDB会比LocalStorage容量大得多,一般来说不少于 250MB,甚至没有上限,此外它使用object store存储,而且支持transaction,另外很重要的一点它是异步的,意味着不会阻塞录屏器的运行 +对于客户端的数据,可以利用浏览器提供的indexedDB进行存储,毕竟indexedDB会比LocalStorage容量大得多,一般来说不少于 250MB,甚至没有上限,此外它使用object store存储,而且支持transaction,另外很重要的一点它是异步的,意味着不会阻塞录屏器的运行 之后数据可以通过WebSocket或其他方式持续上传到OSS服务器中,由于数据是分块进行传输的,在同步之后还可以增加数据校验码来保证一致性避免错误 diff --git a/packages/player/src/index.ts b/packages/player/src/index.ts index f0e53d51..cc4045f4 100644 --- a/packages/player/src/index.ts +++ b/packages/player/src/index.ts @@ -3,8 +3,8 @@ import { ContainerComponent } from './container' import { Panel } from './panel' export async function replay() { - const indexDB = await DBPromise - const { width, height, vNode, data } = await indexDB.getData() + const indexedDB = await DBPromise + const { width, height, vNode, data } = await indexedDB.getData() const container = new ContainerComponent({ vNode, width, height }) new Panel(container, data) diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index c980ae72..398ba5c8 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -1,5 +1,5 @@ export * from './store/listener' export * from './store/node' -export * from './store/data' +export * from './store/idb' export * from './redux' export * from './tool' diff --git a/packages/utils/src/store/data.ts b/packages/utils/src/store/idb.ts similarity index 87% rename from packages/utils/src/store/data.ts rename to packages/utils/src/store/idb.ts index df4c948f..aaade018 100644 --- a/packages/utils/src/store/data.ts +++ b/packages/utils/src/store/idb.ts @@ -1,6 +1,6 @@ import { SnapshotData, WindowSnapshotData, DOMSnapshotData } from '@WebReplay/snapshot' -export class IndexDBOperator { +export class IndexedDBOperator { db: IDBDatabase DBName: string version: number @@ -13,7 +13,7 @@ export class IndexDBOperator { const request = window.indexedDB.open(DBName, version) request.onerror = e => { - console.error('open IndexDB on error') + console.error('open indexedDB on error') } request.onsuccess = e => { @@ -43,7 +43,7 @@ export class IndexDBOperator { .add(data) request.onerror = e => { - throw new Error('write IndexDB on error') + throw new Error('write indexedDB on error') } } @@ -77,8 +77,8 @@ export class IndexDBOperator { } } -export const DBPromise: Promise = new Promise(resolve => { - const indexDB = new IndexDBOperator('wr_db', 1, 'wr_data', () => { - resolve(indexDB) +export const DBPromise: Promise = new Promise(resolve => { + const indexedDB = new IndexedDBOperator('wr_db', 1, 'wr_data', () => { + resolve(indexedDB) }) })