feat: add local storage (#14)

* feat: add storage

* feat: add indexedDB

Author: xudafeng

.eslintrc.js

@@ -24,4 +24,4 @@ module.exports = getESLintConfig('react-ts', {
       '@typescript-eslint/parser': ['.ts', '.tsx'],
     },
   },
-});
+});

demo.png

@@ -14,7 +14,7 @@
     "@electron/remote": "2",
     "detect-port": "1",
     "electrom": "19",
-    "electron": "22",
+    "electron": "19",
     "electron-json-storage-alt": "18",
     "electron-webview-schedule": "18",
     "electron-windows": "18",
@@ -26,12 +26,17 @@
     "semver": "^7.3.8",
     "windows-verify-trust": "1"
   },
+  "optionalDependencies": {
+    "@journeyapps/sqlcipher": "^5.3.1"
+  },
   "devDependencies": {
     "@applint/spec": "^1.2.3",
     "@electron/asar": "3",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.181",
+    "@types/node": "^18.15.11",
     "cross-env": "^7.0.3",
+    "dexie": "^3.2.3",
     "easy-i18n-cli": "1",
     "electron-installer-dmg": "^4.0.0",
     "eslint": "7",
@@ -42,6 +47,7 @@
     "gulp-nodemon": "^2.5.0",
     "husky": "*",
     "mocha": "*",
+    "monitor.js": "^2.0.1",
     "nyc": "^15.1.0",
     "startserver": "1",
     "ts-jest": "^26.5.6",

package.json

@@ -13,7 +13,7 @@ function startElectron(done) {
       'package.json',
     ],
     done,
-    delay: '2500',
+    delay: '5000',
   });
   stream
     .on('restart', files => {

scripts/electron.js

@@ -1,4 +1,4 @@
-import { ipcMain, dialog } from 'electron';
+import { ipcMain, dialog, shell } from 'electron';
 
 export default class App {
   init() {
@@ -13,6 +13,9 @@ export default class App {
 
   bindIPC() {
     const { isWin } = this;
+    ipcMain.on('openExternal', (_, data) => {
+      shell.openExternal(data);
+    });
     ipcMain.on('start-action', (_, action) => {
       if (action === 'electrom') {
         require('./electrom')(this);
@@ -40,6 +43,8 @@ export default class App {
           return;
         }
         this.alertWindows();
+      } else if (action === 'local-storage') {
+        require('./local-storage')(this);
       }
     });
   }

src/app.ts

@@ -0,0 +1,47 @@
+'use strict';
+
+const url = require('url');
+const path = require('path');
+require('@electron/remote/main').initialize();
+
+function initSQLCipher() {
+  const sqlite3 = require('@journeyapps/sqlcipher').verbose();
+  console.log(sqlite3);
+}
+
+module.exports = (app) => {
+  const mainUrl = url.format({
+    pathname: path.join(__dirname, 'renderer', 'main.html'),
+    protocol: 'file:',
+  });
+  const loadingUrl = url.format({
+    pathname: path.join(__dirname, 'renderer', 'loading.html'),
+    protocol: 'file:',
+  });
+  const windowSize = {
+    width: 1280,
+    height: 800,
+  };
+  const window = app.windowManager.create({
+    name: 'local-storage',
+    loadingView: {
+      url: loadingUrl,
+    },
+    browserWindow: {
+      ...windowSize,
+      title: 'NoSQL Storage',
+      show: true,
+      acceptFirstMouse: true,
+      webPreferences: {
+        enableRemoteModule: false,
+        nodeIntegration: false,
+        webSecurity: true,
+        webviewTag: true,
+        preload: path.join(__dirname, 'renderer', 'preload.js'),
+      },
+    },
+    openDevTools: true,
+  });
+  window.loadURL(mainUrl);
+  initSQLCipher();
+};

src/local-storage/index.ts

@@ -0,0 +1,85 @@
+'use strict';
+
+window.indexedDBHelper = {
+  deleteAllIndexedDB: async function () {
+    const dbs = await window.indexedDB.databases();
+    for (const db of dbs) {
+      console.log('delete db start:', db);
+      try {
+        const res = await this.deleteDatabase(db.name);
+        console.log('delete db success:', res);
+      } catch (e) {
+        console.log('delete db failed', e);
+      }
+    }
+    return true;
+  },
+  deleteDatabase: (name) => {
+    return new Promise(((resolve, reject) => {
+      const request = window.indexedDB.deleteDatabase(name);
+      request.onsuccess = (event) => {
+        resolve(event);
+      };
+      request.onerror = (event) => {
+        reject(event.target.error);
+      };
+      request.onblocked = (event) => {
+        reject(event.target.error);
+      };
+    }));
+  },
+  getObjectStore: (dbName, dbVersion = 1, storeName) => {
+    return new Promise(((resolve, reject) => {
+      const request = window.indexedDB.open(dbName, dbVersion);
+      request.onerror = (event) => {
+        reject(event.target.error);
+      };
+      request.onsuccess = (event) => {
+        const db = event.target.result;
+        console.log('onsuccess', db.version, db.objectStoreNames);
+        const objectStore = db.transaction(storeName, 'readwrite')
+          .objectStore(storeName);
+        resolve(objectStore);
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        console.log('onupgradeneeded', db.version, db.objectStoreNames);
+        let objectStore;
+        if (db.objectStoreNames.contains(storeName)) {
+          objectStore = db.transaction(storeName, 'readwrite')
+            .objectStore(storeName);
+        } else {
+          objectStore = db.createObjectStore(storeName, {
+            autoIncrement: true,
+          });
+        }
+        resolve(objectStore);
+      };
+    }));
+  },
+  addBatchTestData: (objectStore, count = 1000) => {
+    return new Promise((resolve, reject) => {
+      for (let i = 1; i <= count; i++) {
+        const data = {
+          index1: `index_${i}`,
+          field1: new Array(100).fill('测试').join(''),
+        };
+        const request = objectStore.add(data);
+        request.onerror = (event) => {
+          console.error('Error adding data:', event);
+        };
+        request.onsuccess = () => {
+          console.log('Data added successfully');
+        };
+      }
+      objectStore.transaction.oncomplete = () => {
+        console.log('Transaction completed');
+        resolve(true);
+      };
+      objectStore.transaction.onerror = (event) => {
+        console.error('Transaction failed:');
+        reject(event.target.error);
+      };
+    });
+  },
+};

src/local-storage/renderer/indexeddb-helper.js

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Loading</title>
+  <style>
+    ::-webkit-scrollbar {
+      display: none;
+    }
+    * {
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+    html,
+    body {
+      background-color: white;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+    .wrapper {
+      text-align: center;
+      padding-top: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div class="wrapper">
+    <div class="loading">
+      loading...
+    </div>
+  </div>
+</body>
+</html>

src/local-storage/renderer/loading.html

@@ -0,0 +1,50 @@
+body {
+  margin: 0;
+}
+
+#perf-board {
+  position: fixed;
+  width: 204px;
+  top: 8px;
+  right: 8px;
+}
+
+#wrapper {
+  margin: 0 auto;
+  width: 80%;
+  margin-top: 80px;
+}
+
+.logs {
+  height: 300px;
+  overflow-y: scroll;
+}
+
+.content {
+  display: flex;
+}
+
+.content-item {
+  flex: 1;
+  border: 1px solid gray;
+  padding: 8px;
+}
+
+.content-item .logs {
+  min-height: 90px;
+  margin: 12px 4px;
+  padding: 8px;
+  border: 1px solid gray;
+}
+
+.content-item .switch fieldset {
+  min-height: 110px;
+}
+
+.content-item button {
+  margin-top: 12px;
+}
+
+#others {
+  margin-top: 12px;
+}