如何在 IndexedDB 中保存对象?
How do I save an object in 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 ) 从 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 相关文章您可以在这里找到。
注意*- 请清除站点数据,您可能会像之前尝试的那样遇到多个版本问题(在这种情况下,您可以更改或添加外部版本)
我想将我的 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 ) 从 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 相关文章您可以在这里找到。
注意*- 请清除站点数据,您可能会像之前尝试的那样遇到多个版本问题(在这种情况下,您可以更改或添加外部版本)