javascript - 如何在 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]);
}
解决方案
按照以下步骤获得良好的架构和可重用组件(示例项目在此处创建):-
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(() => {});
}
}
utility.js
3 ) 从 indexDB (in 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());
示例项目创建在这里,你可以参考这个项目进一步使用,更多关于模式和有用的 Dexie 相关文章你可以在这里找到。
注意*- 请清除站点数据,您可能会遇到之前尝试的多个版本问题(在这种情况下,您可以更改或添加外向性)
推荐阅读
- java - 如何将文档添加到事务中的 Firebase 集合?
- c# - 如何使用谷歌云视觉和统一使用移动相机识别文本?
- regex - 从文本框中获取字符串并放入可变数组
- kotlin - Kapt 不处理 micronaut-predator-processor
- wordpress - wordpress 商店重定向到哪里?
- c# - C#项目没有为自己写的c++ dll定义入口点
- ios - 在attributeText中添加链接修饰符后,范围内的文本变得不可见
- r - 您如何从世界银行 API 将多个指标下载到 R 中的单独列中?
- reactjs - Webpack dist 文件夹无法运行项目
- linux - 使用 docker - su 的身份验证失败