有时 indexedDB 需要很长时间来存储数据。

huangapple
go评论97阅读模式
英文:

Sometime indexedDB takes so much to store the data

问题

Here is the translated content:

我在使用indexedDB时遇到了一个奇怪的问题。每当我安装另一个扩展程序时，有时indexedDB在将数据写入数据库时会花费很长时间。
我尝试使用indexedDB API和基于indexedDB的库来解决这个问题，但似乎什么都不起作用。

以下是我正在使用的代码：

  1. function updateRecord({
  2.   sessionId,
  3.   ...record
  4. }) {
  5.   return new Promise(async (resolve, reject) => {
  6.     try {
  7.       console.log(
  8.         '%c Inside update record ',
  9.         'background: #222; color: #bada55'
  10.       );
  11.       const dbPromise = await idb.openDB('testbuddyExtension', 1, {
  12.         upgrade(db) {
  13.           const store = db.createObjectStore('testbuddy', {
  14.             keyPath: 'sessionId',
  15.           });
  16.           store.createIndex('keyIndex', 'tabId');
  17.         },
  18.       });
  20.       const existingRecord = await dbPromise.get('testbuddy', sessionId);
  22.       const updatedPayload = {
  23.         ...record,
  24.         ...(existingRecord ? existingRecord : {}),
  25.       };
  27.       await dbPromise.put('testbuddy', { ...updatedPayload, sessionId });
  28.       console.log(
  29.         '%c Everything is now done! ',
  30.         'background: #222; color: #bada55'
  31.       );
  32.       resolve(true);
  33.     } catch (error) {
  34.       console.log('%c Error found! ', 'background: #222; color: #bada55');
  35.       console.log({ error });
  36.       reject(false);
  37.     }
  38.   });
  39. }

这里是一个可能会帮助你理解的视频。另外，它不是因为我一次写入大量数据而减慢的情况。我已经使用相同的脚本一次写入了数兆字节的数据。

英文:

I am facing one weird issue while working with indexedDB. Whenever I install another extension, sometimes indexedDB takes so much of time to write the data into db.
I tried to fix this issue by using indexedDB API and a library based on indexedDB but nothing seems to work.

Here is the code I am using

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function updateRecord({
  2.   sessionId,
  3.   ...record
  4. }) {
  5.   return new Promise(async(resolve, reject) =&gt; {
  6.     try {
  7.       console.log(
  8.         &#39;%c Inside update record &#39;,
  9.         &#39;background: #222; color: #bada55&#39;
  10.       );
  11.       const dbPromise = await idb.openDB(&#39;testbuddyExtension&#39;, 1, {
  12.         upgrade(db) {
  13.           const store = db.createObjectStore(&#39;testbuddy&#39;, {
  14.             keyPath: &#39;sessionId&#39;,
  15.           });
  16.           store.createIndex(&#39;keyIndex&#39;, &#39;tabId&#39;);
  17.         },
  18.       });
  20.       const existingRecord = await dbPromise.get(&#39;testbuddy&#39;, sessionId);
  22.       const updatedPayload = {
  23.         ...record,
  24.         ...(existingRecord ? existingRecord : {}),
  25.       };
  27.       await dbPromise.put(&#39;testbuddy&#39;, { ...updatedPayload,
  28.         sessionId
  29.       });
  30.       console.log(
  31.         &#39;%c Everything is now done! &#39;,
  32.         &#39;background: #222; color: #bada55&#39;
  33.       );
  34.       resolve(true);
  35.     } catch (error) {
  36.       console.log(&#39;%c Error found! &#39;, &#39;background: #222; color: #bada55&#39;);
  37.       console.log({
  38.         error
  39.       });
  40.       reject(false);
  41.     }
  42.   });
  43. }

<!-- end snippet -->

And here is a video that might help you understand. Also, it is not the case that it is slowing down because I am writing a whole lot of data at once. I have used the same script to write down megabytes of data at once.

答案1

得分: 0

这个问题现在已经解决。正如您在视频中所看到的，当我启用另一个扩展时，我的扩展引发了一些错误。那是因为我在扩展启用时运行了一些脚本。我忘记提及扩展的ID。

  1. chrome.management.onEnabled.addListener(() => {
  2.   // 每当安装任何扩展时运行此代码
  3.   destroyDatabase().catch((error) => {
  4.     console.error('Failed to delete database', error);
  5.   });
  6.   reExecuteScript();
  7. });

而应该这样做：

  1. chrome.management.onEnabled.addListener((data) => {
  2.   if (data.id === chrome.runtime.id) {
  3.     destroyDatabase().catch((error) => {
  4.       console.error('Failed to delete database', error);
  5.     });
  6.     reExecuteScript();
  7.   }
  8. });
英文:

This issue is resolved now. As you can see in the video, when I enabled another extension, my extension raised some errors. And that was because I was running some script whenever the extension is enabled. And I forgot to mention the extension id.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. chrome.management.onEnabled.addListener(() =&gt; {
  2.   //This code was running whenever any extension is installed
  3.   destroyDatabase().catch((error) =&gt; {
  4.     console.error(&#39;Failed to delete database&#39;, error);
  5.   });
  6.   reExecuteScript();
  7. });

<!-- end snippet -->

And this is how it should be done.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. chrome.management.onEnabled.addListener((data) =&gt; {
  2.   if (data.id === chrome.runtime.id) {
  3.     destroyDatabase().catch((error) =&gt; {
  4.       console.error(&#39;Failed to delete database&#39;, error);
  5.     });
  6.     reExecuteScript();
  7.   }
  8. });

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月26日 15:16:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/76338471.html
  • chrome-extension-manifest-v3
  • google-chrome-extension
  • indexeddb
  • javascript
  • node.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定