如何在 IndexedDB 中保存对象？答案

【问题标题】：How do I save an object in IndexedDB?如何在 IndexedDB 中保存对象？
【发布时间】：2021-05-31 00:22:18
【问题描述】：

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

【问题讨论】：

但是为什么在浏览器中保存的数据超过 5 mb
嘿 Dheeraj，你解决了这个问题吗？或者你可能还需要帮助？
尚未寻找解决方案
添加我将如何处理这种情况的答案
你在哪里添加你的答案

标签： javascript indexeddb

【解决方案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，你可以参考这个项目进一步使用，更多关于schema和有用的Dexie相关文章你可以找到here。

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

【讨论】：