1 npm
npm install idb2 代码文章来源：https://www.toymoban.com/news/detail-655347.html
<template>
<div>
<p>Data: {{ data }}</p>
<button @click="fetchData">Fetch Data</button>
</div>
</template>
<script>
import { openDB } from 'idb';
export default {
data() {
return {
data: null
}
},
methods: {
async fetchData() {
// 发送第三方请求 url 填写
const response = await fetch(url);
const data = await response.json();
// 将数据存储到 IndexedDB 中
let db = await openDB('my-store', 1, {
upgrade(db) {
db.createObjectStore('my-store');
}
});
db = await openDB('my-store', 1);
)
const tx = db.transaction('my-store', 'readwrite');
const store = tx.objectStore('my-store');
console.log('store', store)
await store.put(data, 'my-data');
await tx.done;
// 从 IndexedDB 中获取数据
const tx2 = db.transaction('my-store');
const data2 = await tx2.objectStore('my-store').get('my-data');
await tx2.done;
// 更新数据
this.data = data2;
console.log(data2)
}
}
}
</script>
文章来源地址https://www.toymoban.com/news/detail-655347.html
到了这里，关于vue 使用indexDB 简单完整逻辑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
