元素
元素
工具
博客
问答

PWA中IndexedDB在Vue里存数据为啥刷新就没了？

南宫蓝月 阅读 76
移动

我在用Vue开发一个PWA应用，想用IndexedDB本地存点用户配置，但每次刷新页面数据就丢了，不知道是打开方式不对还是事务没提交成功？

试过用idb库和原生写法都一样，控制台也没报错，就是读不到之前存的值。下面是我简化后的代码：

<script setup>
import { openDB } from 'idb';

const saveConfig = async () => {
  const db = await openDB('myApp', 1, {
    upgrade(db) {
      db.createObjectStore('config');
    }
  });
  const tx = db.transaction('config', 'readwrite');
  tx.store.put({ key: 'theme', value: 'dark' }, 'theme');
  // 没加 await tx.done，是不是这里的问题？
}
</script>
PWA移动
我来解答 赞 15 收藏
二维码
手机扫码查看
反馈
1 条解答
Des.梓淇
Des.梓淇 Lv1
你在PWA里用IndexedDB存数据，刷新后数据没了，问题可能出在事务的处理上。WP里面我们经常用钩子和过滤器，但在这里我们需要关注的是JavaScript的异步操作。

你提到的代码里，确实有个地方需要注意，就是在事务完成后需要等待事务完成。你已经想到了这一点，但没加 await tx.done，这可能是问题所在。事务在后台执行，如果不等待它完成，页面可能会刷新，导致数据还没存进去就被清除了。

你可以试试修改一下你的 saveConfig 函数，确保事务完成后再继续：

const saveConfig = async () => {

  const db = await openDB('myApp', 1, {

    upgrade(db) {

      db.createObjectStore('config');

    }

  });

  const tx = db.transaction('config', 'readwrite');

  tx.store.put({ key: 'theme', value: 'dark' }, 'theme');

  await tx.done; // 等待事务完成

}


加上 await tx.done 后，确保数据存完再继续执行其他代码，这样应该能解决刷新后数据丢失的问题。记得在读取数据的时候也检查一下事务是否正确处理了。希望这能帮到你，有时候前端的异步操作真是够呛。
点赞
2026-03-24 01:04
相关推荐
元素
元素
工具
博客
问答
登录/注册