javascript - How do I save an object in IndexedDB? - Stack Overflow

admin管理员组

文章数量:1330602

I want to store my API data in indexedDB of Browser. I would have tried local storage but it has a limit of 5MB but my JSON data is more than 7MB. I want to save in indexedDB for faster access. I want to save the whole data in the JSON format but don't know how to set the scheme of the indexed DB. The data fetched from the database is 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]);
        }

I want to store my API data in indexedDB of Browser. I would have tried local storage but it has a limit of 5MB but my JSON data is more than 7MB. I want to save in indexedDB for faster access. I want to save the whole data in the JSON format but don't know how to set the scheme of the indexed DB. The data fetched from the database is 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]);
        }

• javascript
• indexeddb

Share Improve this question Follow edited May 30, 2021 at 16:22 Josh 18.7k77 gold badges5454 silver badges7272 bronze badges asked May 17, 2021 at 14:22 DheerajDheeraj 11922 silver badges99 bronze badges 5

• But why are saving data more then 5 mb in browser – Technical knowledge Commented May 17, 2021 at 14:23
• 1 Hey Dheeraj, have you solved this?, or you still might need help? – Abhijeet Abnave Commented May 18, 2021 at 6:44
• not yet still looking for solution – Dheeraj Commented May 18, 2021 at 11:37
• 1 Adding answer for how I would handle this case scenario – Abhijeet Abnave Commented May 18, 2021 at 15:02
• Where are you adding your answer – Dheeraj Commented May 18, 2021 at 17:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Follow these steps for good architecture and reusable ponents ( Sample project is created here ):-

1 ) Create one file lets just name it indexDB.js

import Dexie from 'dexie';

const db = new Dexie('ReactDexie');

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

export default db;

2 ) Now make one utility function that will store API data (let's assume this is in file 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 ) function for fetching data from indexDB (in 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 ) I am considering sample JSON data as following (suppose you are getting this data in 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 ) Store and Fetch data as following (you can call utility.js functions in `App.js file)

  saveDataInIndexDB(sampleJSONdata);

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

  console.log(getDataFromDB());

The sample project is created here, you can refer to this project for further use, more about schema and useful Dexie related article you can find here.

Note*- Please clear site data, you might face multiple version issues as you were trying earlier (in that case you can change or add extraversion)

本文标签： javascriptHow do I save an object in IndexedDBStack Overflow