indexedDB 简单封装库使用技巧

2023-09-01 23:45:42

indexedDB 是一个用于在客户端存储数据的 API。它允许你存储大量数据，并且可以快速地检索和更新数据。indexedDB 的语法非常复杂，因此 IDBClass 库诞生了。它为 indexedDB 提供了一个简单的 JavaScript 封装，使得使用 indexedDB 变得更加容易。

IDBClass 库的使用方法

为了使用 IDBClass 库，首先需要在你的 HTML 页面中引用它。你可以通过 CDN 或 npm 来安装 IDBClass 库。

<script src="https://unpkg.com/idbclass@latest/dist/idbclass.min.js"></script>

接下来，就可以在你的 JavaScript 代码中使用 IDBClass 库了。

// 创建一个新的 indexedDB 数据库
const db = new IDBClass('my-database', 1);

// 创建一个对象存储空间
const store = db.createObjectStore('people', { keyPath: 'id' });

// 向对象存储空间添加一条数据
store.put({ id: 1, name: 'John Doe' });

// 从对象存储空间中获取一条数据
store.get(1).then(function(person) {
  console.log(person.name); // "John Doe"
});

// 更新对象存储空间中的一条数据
store.put({ id: 1, name: 'Jane Doe' });

// 从对象存储空间中删除一条数据
store.delete(1);

使用 IDBClass 库构建一个简单的本地存储应用程序

为了演示如何使用 IDBClass 库构建一个简单的本地存储应用程序，我们创建一个名为 "Todo List" 的应用程序。这个应用程序将允许用户添加、删除和完成任务。

首先，我们需要创建一个 HTML 页面来显示我们的应用程序。

<!DOCTYPE html>
<html>
  <head>
    
    <script src="https://unpkg.com/idbclass@latest/dist/idbclass.min.js"></script>
    <script src="todo.js"></script>
  </head>
  <body>
    <h1>Todo List</h1>
    <input type="text" id="task-input" placeholder="Enter a task">
    <button id="add-task-button">Add Task</button>
    <ul id="todo-list"></ul>
  </body>
</html>

接下来，我们需要创建一个 JavaScript 文件来处理应用程序的逻辑。

// 创建一个新的 indexedDB 数据库
const db = new IDBClass('todo-list', 1);

// 创建一个对象存储空间
const store = db.createObjectStore('tasks', { keyPath: 'id' });

// 获取任务列表元素
const todoList = document.getElementById('todo-list');

// 获取任务输入元素
const taskInput = document.getElementById('task-input');

// 获取添加任务按钮元素
const addTaskButton = document.getElementById('add-task-button');

// 添加任务按钮的点击事件监听器
addTaskButton.addEventListener('click', function() {
  // 获取任务输入框中的值
  const task = taskInput.value;

  // 将任务添加到对象存储空间
  store.put({ id: Date.now(), task: task, completed: false });

  // 清空任务输入框
  taskInput.value = '';

  // 刷新任务列表
  refreshTodoList();
});

// 刷新任务列表
function refreshTodoList() {
  // 清空任务列表
  todoList.innerHTML = '';

  // 从对象存储空间中获取所有任务
  store.getAll().then(function(tasks) {
    // 遍历任务
    tasks.forEach(function(task) {
      // 创建一个新的列表项元素
      const listItem = document.createElement('li');

      // 设置列表项元素的文本内容
      listItem.textContent = task.task;

      // 如果任务已完成，则为列表项元素添加一个 "completed" 类
      if (task.completed) {
        listItem.classList.add('completed');
      }

      // 为列表项元素添加一个点击事件监听器
      listItem.addEventListener('click', function() {
        // 将任务标记为已完成
        task.completed = true;

        // 将任务更新到对象存储空间
        store.put(task);

        // 刷新任务列表
        refreshTodoList();
      });

      // 将列表项元素添加到任务列表中
      todoList.appendChild(listItem);
    });
  });
}

// 在页面加载时刷新任务列表
window.addEventListener('load', function() {
  refreshTodoList();
});