如何在Vue JS中实现localhost:3000首页加载时删除IndexedDB？

这里有几种简单的实现方式，适配Vue 2和Vue 3项目，你可以根据自己的项目情况选择：

1. 封装删除IndexedDB的工具函数 #

首先我们写一个通用的工具函数，用来删除指定的IndexedDB数据库，同时只会在localhost:3000环境下执行：

// 可以放在src/utils/indexedDbUtils.js中
export const deleteIndexedDB = (dbName) => {
  // 仅在localhost:3000环境下执行
  if (window.location.host !== 'localhost:3000') {
    console.log('非本地开发环境，跳过IndexedDB删除操作');
    return Promise.resolve();
  }

  return new Promise((resolve, reject) => {
    const deleteRequest = indexedDB.deleteDatabase(dbName);

    deleteRequest.onsuccess = () => {
      console.log(`IndexedDB ${dbName} 删除成功`);
      resolve();
    };

    deleteRequest.onerror = (event) => {
      console.error(`IndexedDB ${dbName} 删除失败:`, event.target.error);
      reject(event.target.error);
    };

    deleteRequest.onblocked = () => {
      console.warn(`IndexedDB ${dbName} 删除被阻止，可能存在未关闭的数据库连接`);
      // 可以在这里尝试关闭所有已打开的连接，或者提示用户刷新页面
      reject(new Error('数据库删除被阻止，请关闭其他标签页后重试'));
    };
  });
};

2. 在Vue 2项目的首页组件中调用 #

假设你的首页组件是src/views/Home.vue，在组件的mounted生命周期钩子中调用上面的工具函数：

<template>
  <!-- 你的首页内容 -->
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>
import { deleteIndexedDB } from '@/utils/indexedDbUtils';

export default {
  name: 'Home',
  mounted() {
    // 替换成你实际的IndexedDB数据库名称
    deleteIndexedDB('your-database-name')
      .catch(err => console.error('处理删除失败:', err));
  }
};
</script>

3. 在Vue 3项目的首页组件中调用（使用Composition API） #

如果是Vue 3的<script setup>写法，代码会更简洁：

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { deleteIndexedDB } from '@/utils/indexedDbUtils';

onMounted(async () => {
  try {
    // 替换成你实际的IndexedDB数据库名称
    await deleteIndexedDB('your-database-name');
  } catch (err) {
    console.error('处理删除失败:', err);
  }
});
</script>

注意事项 #

• 请替换代码中的your-database-name为你实际使用的IndexedDB数据库名称，如果有多个数据库，可以多次调用deleteIndexedDB函数。
• 如果出现onblocked回调触发的情况，说明当前有其他页面或者标签页打开了该数据库连接，此时需要关闭这些连接才能成功删除，你可以根据需求在回调中添加提示逻辑。
• 这个操作只会在首页加载时执行一次，每次刷新首页都会触发删除。

内容的提问来源于stack exchange，提问作者smith