javascript - 如何在 IndexedDB 中保存对象？

Question

我想将我的 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]);
        }

Answer 1

遵循这些步骤以获得良好的架构和可重用的组件(示例项目已创建 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 ) 从 indexDB 中获取数据的函数(在 utility.js 文件中)

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 ) 如下存储和获取数据(你可以在`App.js 文件中调用utility.js 函数)

  saveDataInIndexDB(sampleJSONdata);

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

  console.log(getDataFromDB());

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

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