无法使用indexedDB保存值

dwbf0jvd  于 2022-12-09  发布在  IndexedDB
关注(0)|答案(1)|浏览(260)

你好,我被indexedDB卡住了。当我试图存储一个链接数组时,它失败了,没有错误或异常。我有两个代码示例。这个工作得很好:

export const IndexedDB = {
  initDB(): Promise<string> {
    return new Promise((resolve, reject) => {
      const open = indexedDB.open("MyDB", 1);
      open.onupgradeneeded = function () {
        open.result.createObjectStore("store", { keyPath: "id" });
        resolve("Database initialized successfully...");
      };
      open.onerror = function (err) {
        reject(err);
      };
      open.onsuccess = function () {
        resolve("Database initialized successfully...");
      };
    });
  },

  getAll(): Promise<Values> {
    return new Promise((resolve, reject) => {
      const open = indexedDB.open("MyDB", 1);
      open.onerror = function (err) {
        reject(err);
      };

      open.onsuccess = function () {
        const tx = open.result.transaction("store", "readonly");
        const store = tx.objectStore("store");
        const getFromStore = store.getAll();

        getFromStore.onerror = function (err) {
          reject(err);
        };

        getFromStore.onsuccess = function () {
          resolve(getFromStore.result);
        };
      };
    });
  },

  putMany(values: Values): Promise<void> {
    return new Promise((resolve, reject) => {
      const open = indexedDB.open("MyDB", 1);
      open.onerror = function (err) {
        reject(err);
      };

      open.onsuccess = function () {
        values.forEach((value: Value) => {
          const tx = open.result.transaction("store", "readwrite");
          const store = tx.objectStore("store");
          const putInStore = store.put(value);

          putInStore.onerror = function (err) {
            reject(err);
          };
        });
        resolve();
      };
    });
  },
};

App.tsx:

export const saveValues = (values: Values): Promise<void> => {
  IndexedDB.putMany(values);
};

export const App: React.FunctionComponent = () => {
  const valuesForTest: Values = [
    {
      id: Math.random(),
      text: "Hello world!"
    },
    {
      id: Math.random(),
      text: "Hello world!"
    },
    {
      id: Math.random(),
      text: "Hello world!"
    }
  ];

  useEffect(() => {
        saveValuesToDB(valuesForTest);
  }, []);

  return (
    <SomeComponent/>
  );
};

这个例子总是失败。没有任何错误或异常。数据只是没有被保存。主要的区别只是数据类型。第一个例子使用“Values”类型,第二个例子使用“Links”类型。

export const IndexedDB = {
  initDB(): Promise<string> {
    return new Promise((resolve, reject) => {
      const open = indexedDB.open("MyDB", 1);
      open.onupgradeneeded = function () {
        open.result.createObjectStore("store", { keyPath: "href" });
        resolve("Database initialized successfully...");
      };
      open.onerror = function (err) {
        reject(err);
      };
      open.onsuccess = function () {
        resolve("Database initialized successfully...");
      };
    });
  },

  getAll(): Promise<Links> {
    return new Promise((resolve, reject) => {
      const open = indexedDB.open("MyDB", 1);
      open.onerror = function (err) {
        reject(err);
      };

      open.onsuccess = function () {
        const tx = open.result.transaction("store", "readonly");
        const store = tx.objectStore("store");
        const getFromStore = store.getAll();

        getFromStore.onerror = function (err) {
          reject(err);
        };

        getFromStore.onsuccess = function () {
          resolve(getFromStore.result);
        };
      };
    });
  },

  putMany(values: Links): Promise<void> {
    return new Promise((resolve, reject) => {
      const open = indexedDB.open("MyDB", 1);
      open.onerror = function (err) {
        reject(err);
      };

      open.onsuccess = function () {
        values.forEach((value: Link) => {
          const tx = open.result.transaction("store", "readwrite");
          const store = tx.objectStore("store");
          const putInStore = store.put(value);

          putInStore.onerror = function (err) {
            reject(err);
          };
        });
        resolve();
      };
    });
  },
};

App.tsx:

export const saveValues = (values: Links): Promise<void> => {
  IndexedDB.putMany(values);
};

export const App: React.FunctionComponent = () => {
  const valuesForTest: Links = [
    {
      href: "https://somelink1.com/",
      name: "Link"
    },
    {
      href: "https://somelink2.com/",
      name: "Link"
    },
    {
      href: "https://somelink3.com/",
      name: "Link"
    },
  ];

  useEffect(() => {
        saveValuesToDB(valuesForTest);
  }, []);

  return (
    <SomeComponent/>
  );
};

你能帮我吗?

kqhtkvqz

kqhtkvqz1#

如果您使用第一个代码片段创建了数据库,那么您的“store”对象存储将使用id作为keyPath。如果您想将其更改为href,如在第二个代码片段中一样,请先删除数据库(在浏览器devtools中),然后运行第二个代码片段。
请注意,如果您要对现有数据库进行模式更改(而不删除它),则必须将更高的版本号传递到indexedDB.open以触发onupgradeneeded回调:indexedDB.open("MyDB", 2);。如果存在相同版本的数据库,则(显然)不会执行回调,因为它不需要升级。
另请注意,如果要使用两个代码片段来存储不同的内容(值和链接),请为它们使用单独的对象存储:createObjectStore("values", { keyPath: "id" })createObjectStore("links", { keyPath: "href" })
最后但并非最不重要的是,为了更方便地使用IndexedDB,我真的可以推荐使用AceBase(完整的实时数据库)或Dexie(简单的IndexedDB Package 器)。
编辑:在你的putMany方法中,我还看到你在open.onsuccess回调中调用resolve,而不是等到所有的put操作都成功了。这就是为什么你没有得到一个错误,reject将在resolve之后被调用,所以什么也不做。

相关问题