localforage的基础使用

一夜醒来头秃了

已于 2023-02-07 14:55:21 修改

阅读量426

点赞数

分类专栏：插件文章标签： javascript 前端 react.js

于 2023-02-07 14:54:19 首次发布

本文链接：https://blog.csdn.net/hs1219462412/article/details/128918847

版权

插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该文章介绍了如何在React应用中利用LocalForage库进行本地数据存储，通过npm或yarn安装LocalForage，然后创建实例，使用IndexedDB驱动。示例代码展示了如何异步地添加数据到存储，并提供了获取数据的方法。

摘要由CSDN通过智能技术生成

npm install localforage

yarn add localforage

import React from 'react';
import { Button } from 'antd';
import localforage from 'localforage';

// localforage 操作数据增删改查均为异步操作
const STORE = localforage.createInstance({
	driver: localforage.INDEXEDDB, // 使用indexDB
	name: 'vite-test', // 数据库名称
	version: 2.0, // 版本
});

export default function study11() {
  const addStore = () => {
    // set
		STORE.setItem('cvt', { name: 'haha', age: 30, sex: '男' });

    // get
    // STORE.getItem('cvt').then(res => {});
	};

	return (
		<div>
			<Button type="primary" onClick={addStore}>
				新增数据
			</Button>
		</div>
	);
}