前端数据库

鹿守心畔光
145 阅读4分钟

  1. IndexedDB

    1. 简介：IndexedDB是一个在浏览器中存储大量结构化数据（包括文件/二进制大型对象）的API。它是一个事务型数据库系统，类似于传统的关系型数据库，但具有异步API，用于在浏览器环境下进行数据存储和检索。

    2. 适用场景：适用于需要在客户端存储大量数据的应用场景，如离线Web应用、富客户端应用等。例如，一个具有离线功能的笔记应用可以使用IndexedDB来存储笔记内容、附件等数据，用户在离线状态下依然能够查看、编辑和管理笔记。

    3. 使用示例：

      • 打开数据库：

           const request = window.indexedDB.open("myDatabase", 1);
   request.onsuccess = function (event) {
     const db = event.target.result;
     // 在这里可以进行数据库操作，如创建对象仓库等
   };
   request.onerror = function (event) {
     console.log("数据库打开出错：", event.target.error);
   };
   request.onupgradeneeded = function (event) {
     const db = event.target.result;
     const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
   };
   ```

      • 添加数据：

          function addData() {
    const db = window.indexedDB.open("myDatabase", 1).result;
    const transaction = db.transaction(["myObjectStore"], "readwrite");
    const objectStore = transaction.objectStore("myObjectStore");
    const data = { id: 1, name: "示例数据" };
    const request = objectStore.add(data);
    request.onsuccess = function (event) {
      console.log("数据添加成功");
    };
    request.onerror = function (event) {
      console.log("数据添加出错：", event.target.error);
    };
  }
  ```

  2. LocalStorage和SessionStorage

    1. 简介：LocalStorage和SessionStorage是Web Storage API的一部分，它们提供了简单的键 - 值对存储机制。LocalStorage中的数据在浏览器关闭后仍然保留，除非被显式删除；而SessionStorage中的数据仅在当前会话（浏览器标签或窗口关闭时）有效。

    2. 适用场景：适用于存储少量简单的数据，如用户偏好设置、临时状态信息等。例如，一个网页主题切换功能可以使用LocalStorage来存储用户选择的主题颜色，下次用户访问该网页时可以直接应用该主题。

    3. 使用示例：

      • 使用LocalStorage存储数据：

          // 存储数据
  localStorage.setItem("theme", "dark");
  // 获取数据
  const theme = localStorage.getItem("theme");
  // 删除数据
  localStorage.removeItem("theme");
  ```

      • 使用SessionStorage存储数据：

          // 存储数据
  sessionStorage.setItem("cartItems", JSON.stringify([{ id: 1, name: "商品1" }]));
  // 获取数据
  const cartItems = JSON.parse(sessionStorage.getItem("cartItems"));
  // 删除数据
  sessionStorage.removeItem("cartItems");
  ```

  3. PouchDB

    1. 简介：PouchDB是一个在浏览器中运行的开源JavaScript数据库，它基于IndexedDB（在浏览器中）和CouchDB（在服务器端）构建。它提供了类似于CouchDB的API，使得开发者可以在浏览器中进行数据存储和同步操作，并且可以方便地与服务器端的CouchDB数据库进行数据同步。

    2. 适用场景：适用于需要在客户端和服务器端之间进行数据同步的应用场景，如具有实时数据更新功能的移动应用或Web应用。例如，一个在线文档编辑应用可以使用PouchDB在客户端存储文档的本地副本，用户编辑后可以将数据同步到服务器端的CouchDB数据库，同时也可以从服务器端获取其他用户的更新。

    3. 使用示例：

      • 创建或打开数据库：

          const db = new PouchDB('mydb');
  ```

      • 插入数据：

           const doc = {
     _id: 'mydoc',
     title: '我的文档',
     content: '这是文档内容'
   };
   db.put(doc).then(function (response) {
     console.log('文档插入成功');
   }).catch(function (error) {
     console.log('文档插入出错：', error);
   });
   ```

      • 数据同步（假设与服务器端CouchDB进行同步）：

           const remoteDB = 'http://localhost:5984/mydb';
   const syncOptions = {
     live: true,
     retry: true
   };
   db.sync(remoteDB, syncOptions).on('change', function (change) {
     console.log('数据同步成功：', change);
   }).on('error', function (error) {
     console.log('数据同步出错：', error);
   });
   ```

  4. Dexie.js

    1. 简介：Dexie.js是一个用于简化IndexedDB操作的开源库。它提供了更高级的API，使得在浏览器中使用IndexedDB进行数据存储和查询变得更加容易，尤其是在处理复杂的查询和事务时。

    2. 适用场景：适用于需要在浏览器中进行复杂数据存储和查询操作的应用场景，如具有大量数据和复杂数据关系的Web应用。例如，一个具有客户关系管理功能的Web应用可以使用Dexie.js来存储和查询客户信息、订单记录等数据。

    3. 使用示例：

      • 创建数据库和表：

           const db = new Dexie('myDatabase');
   db.version(1).stores({
     users: '++id, name, email',
     orders: '++id, user_id, product, price'
   });
   ```

      • 添加数据：

           db.users.add({ name: '张三', email: 'zhangsan@example.com' }).then(function () {
     console.log('用户添加成功');
   }).catch(function (error) {
     console.log('用户添加出错：', error);
   });
   ```

      • 查询数据：

          db.users.where('name').equals('张三').first().then(function (user) {
    console.log('查询到用户：', user);
  }).catch(function (error) {
    console.log('查询用户出错：', error);
  });
  ```
avatar
文章
阅读
粉丝