vue 封装使用 indexedDB 进行储存数据

封装indexedDB.js 文件

 

// indexedDB.js

// 数据库名称
const DB_NAME = 'myDB';
// 数据库版本号（每次结构变更需递增）
const DB_VERSION = 1;
// 对象仓库（表）名称
const STORE_NAME = 'user';

/**
 * 打开（或创建）IndexedDB 数据库
 * @returns {Promise<IDBDatabase>} 返回数据库实例的 Promise
 */
export function openDB() {
  return new Promise((resolve, reject) => {
    // 打开数据库请求
    const request = indexedDB.open(DB_NAME, DB_VERSION);

    // 如果数据库版本变更或首次创建时触发
    request.onupgradeneeded = function (event) {
      const db = event.target.result;
      // 如果对象仓库不存在则创建，主键为 'id'
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME, { keyPath: 'id' });
      }
    };

    // 打开数据库成功
    request.onsuccess = function (event) {
      resolve(event.target.result);
    };

    // 打开数据库失败
    request.onerror = function (event) {
      reject(event.target.error);
    };
  });
}

/**
 * 向 user 表中添加一个用户
 * @param {Object} user 用户对象，需包含 id 字段
 * @returns {Promise<void>} 添加成功则 resolve，否则 reject
 */
export async function addUser(user) {
  const db = await openDB();
  return new Promise((resolve, reject) => {
    // 创建一个可读写事务
    const tx = db.transaction(STORE_NAME, 'readwrite');
    const store = tx.objectStore(STORE_NAME);
    // 添加用户数据
    const request = store.add(user);

    // 添加成功
    request.onsuccess = () => resolve();

    // 添加失败（如主键重复等）
    request.onerror = (e) => reject(e);
  });
}

/**
 * 获取 user 表中所有用户数据
 * @returns {Promise<Array>} 返回所有用户对象数组
 */
export async function getAllUsers() {
  const db = await openDB();
  return new Promise((resolve, reject) => {
    // 创建一个只读事务
    const tx = db.transaction(STORE_NAME, 'readonly');
    const store = tx.objectStore(STORE_NAME);
    // 获取所有数据
    const request = store.getAll();

    // 获取成功，返回结果数组
    request.onsuccess = (e) => resolve(e.target.result);

    // 获取失败
    request.onerror = (e) => reject(e);
  });
}

/**
 * 根据 id 删除 user 表中的用户
 * @param {string|number} id 用户主键 id
 * @returns {Promise<void>} 删除成功则 resolve，否则 reject
 */
export async function deleteUser(id) {
  const db = await openDB();
  return new Promise((resolve, reject) => {
    // 创建一个可读写事务
    const tx = db.transaction(STORE_NAME, 'readwrite');
    const store = tx.objectStore(STORE_NAME);
    // 删除指定 id 的数据
    const request = store.delete(id);

    // 删除成功
    request.onsuccess = () => resolve();

    // 删除失败
    request.onerror = (e) => reject(e);
  });
}

 

 使用案例

<template>
  <div>
    <h2>用户管理</h2>
    <!-- 输入框：用于输入用户ID，使用v-model实现双向绑定 -->
    <input v-model="userId" placeholder="用户ID" />
    <!-- 输入框：用于输入用户名，使用v-model实现双向绑定 -->
    <input v-model="userName" placeholder="用户名" />
    <!-- 按钮：点击后保存用户信息到IndexedDB -->
    <button @click="saveUser">保存用户</button>
    <!-- 按钮：点击后从IndexedDB读取所有用户 -->
    <button @click="loadUsers">读取所有用户</button>
    <!-- 用户列表：遍历users数组，显示每个用户的信息和删除按钮 -->
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.id }} - {{ user.name }}
        <!-- 删除按钮：点击后删除对应用户 -->
        <button @click="removeUser(user.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
// 导入IndexedDB相关操作方法
import { addUser, getAllUsers, deleteUser } from '@/utils/indexedDB.js';

export default {
  data() {
    return {
      userId: '',   // 绑定用户ID输入框
      userName: '', // 绑定用户名输入框
      users: [],    // 存储所有用户数据的数组
    };
  },
  methods: {
    /**
     * 保存用户信息到IndexedDB
     * 1. 检查输入是否合法
     * 2. 调用addUser方法保存
     * 3. 成功后刷新用户列表，失败时提示
     */
    async saveUser() {
      // 校验输入
      if (!this.userId || !this.userName) {
        alert('请输入ID和用户名');
        return;
      }
      try {
        // 调用addUser方法添加用户
        await addUser({ id: this.userId, name: this.userName });
        alert('保存成功');
        // 保存成功后刷新用户列表
        this.loadUsers();
      } catch (e) {
        // 如果ID已存在或其他错误，提示用户
        alert('保存失败，ID可能已存在');
      }
    },
    /**
     * 从IndexedDB读取所有用户并更新users数组
     */
    async loadUsers() {
      // 调用getAllUsers方法获取所有用户
      this.users = await getAllUsers();
    },
    /**
     * 删除指定ID的用户
     * @param {string} id - 要删除的用户ID
     */
    async removeUser(id) {
      // 调用deleteUser方法删除用户
      await deleteUser(id);
      // 删除后刷新用户列表
      this.loadUsers();
    },
  },
  /**
   * 组件挂载后自动加载所有用户
   */
  mounted() {
    this.loadUsers();
  },
};
</script>