如何在 IndexedDB 中保存对象？

我想将我的API数据存储在浏览器的indexedDB中。我本想尝试本地存储，但它的限制为 5MB，但我的 JSON 数据超过 7MB。我想保存在indexedDB中以便更快地访问。我想以 JSON 格式保存整个数据，但不知道如何设置索引数据库的方案。从数据库中取出的数据是testData

const db =new Dexie("ReactDexie");
db.version(1).stores({
            test:"++id title "   //Dont Know how to set scheme here for my json object
        })
        db.open().catch((err)=>{
            console.log(err.stack || err)
        })

        var transaction = db.transaction([testData], IDBTransaction.READ_WRITE); 
        var objstore = transaction.objectStore(testData); 

        for (var i = 0; i < testData.length; i++) { 
            objstore.put(testData[i]);
        }

按照以下步骤获得良好的架构和可重用的组件（示例项目已创建here ):-

1）创建一个文件，命名即可indexDB.js

import Dexie from 'dexie';

const db = new Dexie('ReactDexie');

db.version(1).stores({
  testData: 'datakey'
});

export default db;

2）现在创建一个实用程序函数来存储 API 数据（假设这是在文件中utility.js)

import db from './indexDB.js';

export async function saveDataInIndexDB(data) {
  if (data) {
    if (db.testData) db.testData.clear();
    db.testData.add({ datakey: 'datakey', data }).then(() => {});
  }
}

3）从indexedDB中获取数据的函数（在utility.js file)

export async function getDataFromIndexDB() {
  const testData = await db.testData
    .where('datakey')
    .equals('datakey')
    .toArray();
  if (testData && testData.length > 0) {
    return testData[0];
  }
  return null;
}

4 ）我正在考虑如下示例 JSON 数据（假设您正在获取此数据App.js)

const sampleJSONdata = {
    type: 'articles',
    id: '1',
    attributes: {
      title: 'JSON:API paints my bikeshed!',
      body: 'The shortest article. Ever.',
      created: '2015-05-22T14:56:29.000Z',
      updated: '2015-05-22T14:56:28.000Z'
    }
  };

5）存储和获取数据如下（您可以调用utility.js`App.js 文件中的函数）

  saveDataInIndexDB(sampleJSONdata);

  const getDataFromDB = async () => {
    let data = await getDataFromIndexDB();
    console.log('Data ', data);
  };

  console.log(getDataFromDB());

示例项目已创建here，你可以参考这个项目进一步使用，更多关于schema和有用的Dexie相关文章你可以找到here.

注意*- 请清除站点数据，您可能会遇到多个版本问题，就像您之前尝试的那样（在这种情况下，您可以更改或添加外部版本）