feat(search): use dexie.js instead of localStorage

Author: sy-records

package-lock.json

@@ -36,6 +36,7 @@
     "*.js": "eslint --fix"
   },
   "dependencies": {
+    "dexie": "^4.0.8",
     "medium-zoom": "^1.1.0",
     "opencollective-postinstall": "^2.0.2",
     "prismjs": "^1.29.0",

package.json

@@ -2,8 +2,24 @@ import {
   getAndRemoveConfig,
   getAndRemoveDocsifyIgnoreConfig,
 } from '../../core/render/utils.js';
+import Dexie from 'dexie';
 
-let INDEXS = {};
+let INDEXES = {};
+
+const db = new Dexie('DocsifySearchDB');
+db.version(1).stores({
+  search: 'key, value',
+});
+
+async function saveData(maxAge, expireKey, indexKey) {
+  await db.search.put({ key: expireKey, value: Date.now() + maxAge });
+  await db.search.put({ key: indexKey, value: JSON.stringify(INDEXES) });
+}
+
+async function getData(key) {
+  const item = await db.search.get(key);
+  return item ? item.value : null;
+}
 
 const LOCAL_STORAGE = {
   EXPIRE_KEY: 'docsify.search.expires',
@@ -73,11 +89,6 @@ function getListData(token) {
   return token.text;
 }
 
-function saveData(maxAge, expireKey, indexKey) {
-  localStorage.setItem(expireKey, Date.now() + maxAge);
-  localStorage.setItem(indexKey, JSON.stringify(INDEXS));
-}
-
 export function genIndex(path, content = '', router, depth) {
   const tokens = window.marked.lexer(content);
   const slugify = window.Docsify.slugify;
@@ -149,10 +160,10 @@ export function ignoreDiacriticalMarks(keyword) {
 export function search(query) {
   const matchingResults = [];
   let data = [];
-  Object.keys(INDEXS).forEach(key => {
+  Object.keys(INDEXES).forEach(key => {
     data = [
       ...data,
-      ...Object.keys(INDEXS[key]).map(page => INDEXS[key][page]),
+      ...Object.keys(INDEXES[key]).map(page => INDEXES[key][page]),
     ];
   });
 
@@ -235,7 +246,7 @@ export function search(query) {
   return matchingResults.sort((r1, r2) => r2.score - r1.score);
 }
 
-export function init(config, vm) {
+export async function init(config, vm) {
   const isAuto = config.paths === 'auto';
   const paths = isAuto ? getAllPaths(vm.router) : config.paths;
 
@@ -269,12 +280,12 @@ export function init(config, vm) {
   const expireKey = resolveExpireKey(config.namespace) + namespaceSuffix;
   const indexKey = resolveIndexKey(config.namespace) + namespaceSuffix;
 
-  const isExpired = localStorage.getItem(expireKey) < Date.now();
+  const isExpired = (await getData(expireKey)) < Date.now();
 
-  INDEXS = JSON.parse(localStorage.getItem(indexKey));
+  INDEXES = JSON.parse(await getData(indexKey));
 
   if (isExpired) {
-    INDEXS = {};
+    INDEXES = {};
   } else if (!isAuto) {
     return;
   }
@@ -283,14 +294,16 @@ export function init(config, vm) {
   let count = 0;
 
   paths.forEach(path => {
-    if (INDEXS[path]) {
+    if (INDEXES[path]) {
       return count++;
     }
 
     Docsify.get(vm.router.getFile(path), false, vm.config.requestHeaders).then(
-      result => {
-        INDEXS[path] = genIndex(path, result, vm.router, config.depth);
-        len === ++count && saveData(config.maxAge, expireKey, indexKey);
+      async result => {
+        INDEXES[path] = genIndex(path, result, vm.router, config.depth);
+        if (len === ++count) {
+          await saveData(config.maxAge, expireKey, indexKey);
+        }
       },
     );
   });

src/plugins/search/search.js

@@ -20,7 +20,6 @@ describe('Creating a Docsify site (integration tests in Jest)', function () {
     const docsifyInitConfig = {
       config: {
         name: 'Docsify Name',
-        themeColor: 'red',
       },
       markdown: {
         coverpage: `
@@ -76,7 +75,6 @@ describe('Creating a Docsify site (integration tests in Jest)', function () {
 
     // Verify config options
     expect(typeof window.$docsify).toBe('object');
-    expect(window.$docsify).toHaveProperty('themeColor', 'red');
     expect(document.querySelector('.app-name').textContent).toContain(
       'Docsify Name',
     );