前端离线存储能力:如何在 React 中巧妙运用IndexedDB

这篇具有很好参考价值的文章主要介绍了前端离线存储能力:如何在 React 中巧妙运用IndexedDB。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

当我们开发复杂的Web应用时,常常需要在客户端存储大量数据。你可能听过 localStorage或者 sessionStorage,但它们在存储空间和功能上都有限。而今天我们要聊的,是一个功能更强大的技术:IndexedDB

IndexedDB 是什么

IndexedDB是一个运行在浏览器中的非关系型数据库。它让你能够存储大量的数据,并具有高性能的查询能力。不像localStorage只能存储字符串,IndexedDB可以存储各种类型的数据,比如文件、Blob,以及你可以想到的其他各种类型。

IndexedDB 的能力

  1. 存储大数据量: 它可以存储比 localStorage更多的数据,而且没有固定的大小限制,往往是根据用户磁盘大小的一定百分比。
  2. 复杂数据存储: 能够存储更加复杂的数据类型。
  3. 查询性能优越: IndexedDB支持索引,你可以建立索引快速检索数据,而不用遍历整个数据库。
  4. 离线应用程序: 在用户没有网的时候,应用还是可以访问到之前存储的数据。
  5. 事务支持: IndexedDB支持事务,你可以进行复杂的数据操作,而且还有回滚的能力。
  6. 异步: 所有操作都是异步的,这也意味着它不会阻塞你的UI线程,用户体验更好。

在 React 项目中使用 IndexedDB

好,现在我们知道了IndexedDB是个好东西,那如何在React中使用它呢?

这篇文章会介绍使用IndexedDB的两种方式。

一、原生方式

我们来创建一个简单的React hook来展示如何使用原生的IndexedDB API。

import { useEffect, useState } from 'react';

const useIndexedDB = (dbName, storeName) => {
  const [db, setDb] = useState(null);

  useEffect(() => {
    const request = indexedDB.open(dbName, 1);

    request.onerror = (event) => {
      console.error('Database error:', event.target.errorCode);
    };

    request.onsuccess = (event) => {
      setDb(event.target.result);
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true });
    };
  }, [dbName, storeName]);

  const addData = (data) => {
    const transaction = db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    store.add(data);
  };

  return [db, addData];
};

这个Hook非常基础,它可以打开数据库,并允许你向数据库中添加数据。

二、使用localForage

现在让我们看看如何使用 localForage——一个快速简便的本地存储库,以更简洁的方式使用IndexedDB。首先,你需要安装 localForage

npm install localforage

现在你可以用它来简化IndexedDB的操作了:

import localForage from 'localforage';

localForage.setItem('somekey', 'somevalue')
    .then(() => {
        return localForage.getItem('somekey');
    })
    .then((value) => {
        // 这里是我们的数据
        console.log(value);
    })
    .catch((err) => {
        // 出错了!
        console.error(err);
    });

localForage.setItem()localForage.getItem()都返回Promise,这让它们可以很方便地与async/await一起使用。

import React, { useEffect } from 'react';
import localForage from 'localforage';

const App = () => {
  useEffect(() => {
    // 保存数据
    async function storeData() {
      try {
        await localForage.setItem('user', { id: 1, name: 'John Doe' });

        // 读取数据
        const userData = await localForage.getItem('user');
        console.log(userData);
        // => {id: 1, name: "John Doe"}
      } catch (err) {
        // 错误处理
        console.error(err);
      }
    }

    storeData();
  }, []);

  return (
    <div>
      <h1>Welcome to IndexedDB with localForage</h1>
    </div>
  );
};

export default App;

在这个例子中,我们创建了一个名为 App的React组件,在组件的 useEffect Hook中,我们写了一个名为 storeDataasync函数来异步交互IndexedDB。我们先使用 setItem方法向IndexedDB中存入数据,然后用 getItem读取这些数据,并把它们打印出来。

localForage支持回调和 Promise形式的API,这使得它非常容易在现代JavaScript或TypeScript应用程序中使用。它也会自动根据浏览器的支持情况后退到使用WebSQL或localStorage,这为你的应用程序提供了更好的兼容性。

实战

接下来让我们试着构建一个小型的待办事项应用,这个应用将会使用React和IndexedDB原生API来存储数据。

第一步:创建一个IndexedDB数据库和对象存储

创建React应用的入口文件 App.js并编写以下内容:

import React, { useState, useEffect } from 'react';

function App() {
  const [db, setDb] = useState(null);
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState('');

  useEffect(() => {
    let request = indexedDB.open('todoDB', 1);

    request.onerror = (e) => {
      console.log('Error opening db', e);
    };

    request.onsuccess = (e) => {
      setDb(e.target.result);
    };

    request.onupgradeneeded = (e) => {
      let db = e.target.result;
      let store = db.createObjectStore('todos', { keyPath: 'id', autoIncrement: true });
      store.createIndex('task', 'task', { unique: false });
    };
  }, []);

  // ...后续内容将会增加到这里...

  return (
    <div>
      <h1>Todo App with IndexedDB</h1>
      {/* 待办事项表单和列表展示将会在这里添加 */}
    </div>
  );
}

export default App;

第二步:实现添加和显示待办事项的功能

现在,我们在组件内实现添加新的待办事项到IndexedDB中和从数据库中读取待办事项列表的功能。

更新 App.js,添加以下内容:

// ...之前的代码...

function addTodo() {
  const transaction = db.transaction(['todos'], 'readwrite');
  const store = transaction.objectStore('todos');
  let request = store.add({ task });

  request.onsuccess = () => {
    console.log('Task added');
    setTask(''); // 清空输入
    loadTodos(); // 重新加载待办事项列表
  };
}

function loadTodos() {
  let transaction = db.transaction(['todos'], 'readonly');
  let store = transaction.objectStore('todos');
  let request = store.openCursor();
  let todos = [];

  request.onsuccess = (e) => {
    let cursor = e.target.result;
    if (cursor) {
      todos.push(cursor.value);
      cursor.continue();
    } else {
      setTodos(todos);
    }
  };
}

// 确保数据被加载
useEffect(() => {
  if (db) {
    loadTodos();
  }
}, [db]);

// ...之前的代码...

return (
  <div>
    {/* 其他代码 */}
    <input type="text" value={task} onChange={(e) => setTask(e.target.value)} />
    <button onClick={addTodo}>Add Task</button>
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.task}</li>
      ))}
    </ul>
  </div>
);

// ...之前的代码...

以上代码完成了以下功能:

  • 通过 useEffect钩子创建或打开一个名为 todoDB的IndexedDB数据库,如果不存在,就会创建一个名叫 todos的对象存储。
  • 使用 addTodo函数来将新任务添加进数据库。
  • 使用 loadTodos函数查询IndexedDB中的所有待办事项,并将它们设置到组件状态中,以便可以在React组件中显示这些待办事项。
  • 提供了一个简单的表单,可以输入新的待办事项并添加到列表中。

此时,我们已经拥有了一个可以使用IndexedDB存储数据的基本的待办事项应用。当然,实际应用中还需要很多增强,比如错误处理、用户输入验证以及待办事项的删除和编辑功能等。但这个例子足以说明如何在React中直接使用IndexedDB,以及开发可以持久存储用户数据的Web应用程序。

结论

IndexedDB的确是一种功能强大的工具,尤其适合那些需要存储和操作大量和/或复杂数据的Web应用程序。不过,记住它的API并不像localStorage那么简单直接,所以在大多数情况下,使用 localForage等库可以大大简化这个过程。文章来源地址https://www.toymoban.com/news/detail-792278.html

到了这里,关于前端离线存储能力:如何在 React 中巧妙运用IndexedDB的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • golang学习笔记——http.Handle和http.HandleFunc的区别与type func巧妙运用

    http.Handle和http.HandleFunc的区别体现了Go语言接口的巧妙运用 下面代码启动了一个 http 服务器,监听 8080 端口,并注册路由。实现这两个路由注册的方法有点不同,一个使用 http.Handle ,另一个使用 http.HandleFunc ,下面来看看这两个之间的区别; 我们简单看一下 http.Handle 函数 这

    2024年01月22日
    浏览(35)
  • GO语言-区块链离线钱包开发之如何存储私钥

    # 如何存储私钥 在确保私钥安全的情况下,为了更好的体验,我们需要让钱包把私钥存储起来。给用户更好的体验感。Geth是将私钥通过加密技术转换为json格式的文件,这个文件虽然是明文的,但是解析它的时候需要密码,否则将无法解密。 在Geth中,使用`personal.newAccount(\\\"p

    2024年02月16日
    浏览(49)
  • @RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)

    目录 一、@RequestMapping  路由映射 二、参数传递 1、传递单个参数 2、传递多个参数 3、传递对象 4、后端参数重命名 5、传递数组 6、传递集合 7、传递JSON 8、获取url中的参数 9、上传图片/文件 指定请求访问的路径 既可以修饰类,又可以修饰方法 @RequestMapping支持Get、Post、Dele

    2024年02月04日
    浏览(50)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月07日
    浏览(56)
  • 前端密钥怎么存储,以及临时存储一些数据,如何存储才最安全?

    前端密钥存储安全的方案: 1、使用浏览器提供的本地存储:现代浏览器提供了本地存储机制,例如 Web Storage(localStorage 和 sessionStorage)或 IndexedDB。可以将密钥存储在这些本地存储中,并使用浏览器提供的安全性机制(例如同源策略)来限制对存储数据的访问。 2、使用 Co

    2024年01月19日
    浏览(46)
  • 前端react如何引入ChatUI实现类似chatgpt智能客服

    可以看官网:ChatUI 第一步: \\\"@chatui/core\\\": \\\"^2.4.2\\\", 第二步: 可以参考这几种方法: 前端react如何引入chatgpt实现智能客服_react chatgpt-CSDN博客 React AntDesign 聊天机器人 阿里ChatUI使用-CSDN博客 封装一个丝滑的聊天框组件_react.js_jacoby_fire-华为云开发者联盟 搭建一个AI对话机器人——

    2024年04月26日
    浏览(36)
  • 一文搞定:前端如何选择Angular、React和Vue三大主流框架

    在前端开发领域,目前最流行的三个框架是Angular、React和Vue.js。这些框架非常高效,并且它们各自具有一系列的优缺点。 在AI辅助编程工具 CodeGeeX 的后台中,也看到有大量的前端开发者使用这三个框架,并且Vue的使用率在 CodeGeeX 的后台中,持续走高。接下来我们针对Angular、

    2024年02月09日
    浏览(54)
  • 前端开发框架React技术如何与小程序结合,进行页面构建

    前端开发框架 React 可以通过小程序提供的开发工具和 API 进行结合。 例如使用小程序提供的 WebView 组件来加载前端框架的页面。 或者使用小程序提供的组件和 API 来实现前端框架的功能。 同时,也可以通过小程序提供的云开发功能来实现前端框架与后端数据的交互。 可以通

    2024年02月09日
    浏览(39)
  • 【性能调优】local模式下flink处理离线任务能力分析

    本文相关讨论 flink内存对任务性能的影响:通过了解内存模型,了解这些模型都负责那些工作,比如用户代码使用堆,数据通讯使用直接内存等,以便能够根据任务特点针对性调整任务内存; 并发与带宽之间的关系,local模式下怎么根据带宽,设置最佳线程数; 内存监控相关

    2024年01月18日
    浏览(66)
  • 前端上传的文件,后端将如何进行存储以及回显

    完成文件上传这个功能需要涉及到两个部分: 前端程序 服务器程序 文件上传后将如何进行储存 本地磁盘储存 云服务器oss储存 ##后端项目创建 创建springboot工程,引入对应的起步依赖(web、mybatis、mysql驱动、lombok) 配置文件application.properties中引入mybatis的配置信息,准备对应

    2024年02月04日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包