localForage

localForage描述：localForage是一个JavaScript库，用于在Web浏览器中进行离线存储。它提供了一种简单的API，它使用后端存储技术，如IndexedDB、Web SQL和localStorage，使用localForage，这对于构建离线应用程序或优化在线应用程序的体验非常有用。localForage还提供了一些便捷的方法，例如自动序列化和反序列化数据，以及设置过期时间等。总之，localForage是一个强大而简单的工具，可以帮助开发人员在Web浏览器中实现离线存储功能，提高应用程序的可靠性和性能。

可以参考localForage的官方文档以了解更多详细信息和用法：https://localforage.github.io/localForage/

要在Vue项目中使用localForage，首先需要安装localForage库。可以通过npm或者yarn进行安装，运行以下命令：

使用npm:

npm install localforage

使用localForage 可以在main.js 配置。

import localforage from 'localforage';
  
localforage.config({
  driver: localforage.INDEXEDDB, // 选择存储引擎，如IndexedDB
  name: 'my-app', // 数据库名称
  version: 1, // 数据库版本号
  storeName: 'my-store', // 存储对象的名称
});

使用localForage 可以在main.js 根目录引入全局方法。

import localforage from 'localforage';
 
Vue.prototype.$localforage = localforage ;

 

安装完成后，在Vue组件中引入localForage库，并使用它的API进行数据存储和检索。下面是一个简单的示例：

<template>
  <div>
    <button @click="saveData">保存数据</button>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
import localforage from 'localforage';

export default {
  methods: {
    saveData() {
      localforage.setItem('myKey', 'Hello, localForage!')
        .then(() => {
          console.log('数据保存成功');
        })
        .catch((error) => {
          console.error('数据保存失败:', error);
        });
    },
    getData() {
      localforage.getItem('myKey')
        .then((value) => {
          console.log('获取到的数据:', value);
        })
        .catch((error) => {
          console.error('获取数据失败:', error);
        });
    }
  }
}
</script>

在上述示例中，我们在Vue组件中引入了localforage库。在方法saveData中，使用localforage.setItem方法将数据保存到本地存储中。在方法getData中，使用localforage.getItem方法从本地存储中获取数据。

 

localForage还提供了许多其他有用的API，如删除数据、清空存储等：要删除localForage中存储的数据，你可以使用removeItem方法或者clear方法。

使用removeItem方法删除指定键的数据

import localforage from 'localforage';

// 删除指定键的数据
localforage.removeItem('myKey')
  .then(() => {
    console.log('数据删除成功');
  })
  .catch((error) => {
    console.error('数据删除失败:', error);
  });

上述代码中，我们使用removeItem方法删除了键为'myKey'的数据。在Promise的then回调中，可以打印出"数据删除成功"的消息，如果删除操作失败，则会在catch回调中输出错误信息

使用clear方法清空所有数据

import localforage from 'localforage';

// 清空所有数据
localforage.clear()
  .then(() => {
    console.log('数据清空成功');
  })
  .catch((error) => {
    console.error('数据清空失败:', error);
  });

上述代码中，我们使用clear方法清空了localForage中的所有数据。与removeItem方法类似，可以在Promise的then回调或者catch回调中处理成功或失败的情况。

请注意，删除数据是不可逆的操作，请谨慎使用。确保你真正需要删除数据而不是仅仅清空存储。在调用删除操作之前，最好先确认用户的意图。

VUE 推荐使用 Pinia 管理 localForage

安装Pinia和localforage：

npm install pinia localforage

在Vue应用程序的入口文件中设置Pinia实例和localforage：

// main.js
import Vue from 'vue';
import { createPinia } from 'pinia';
import localforage from 'localforage';
import { createPlugin } from 'vue-pinia';

const pinia = createPinia();
Vue.use(createPlugin(pinia));

localforage.config({
  // 配置项
});

new Vue({
  pinia,
  // 其他配置项
}).$mount('#app');

在上述代码中，我们首先导入了createPinia函数、localforage和createPlugin函数。然后，使用createPinia创建了一个全局的Pinia实例，并将其作为Vue实例的选项进行注册。接下来，我们使用localforage.config方法对localForage进行配置。最后，通过Vue.use安装了Pinia的插件。

创建并注册Pinia store用于管理localForage

如果你想使用多个数据库，建议通过 pinia 统一管理所有的数据库，这样数据的流向会更明晰，数据库相关的操作都写在 store 中，让你的数据库更规范化。

// store/indexedDB.ts
import { defineStore } from 'pinia'
import localforage from 'localforage'

export const useIndexedDBStore = defineStore('indexedDB', {
  state: () => ({
    filesDB: localforage.createInstance({
      name: 'filesDB',
    }),
    usersDB: localforage.createInstance({
      name: 'usersDB',
    }),
    responseDB: localforage.createInstance({
      name: 'responseDB',
    }),
  }),
  actions: {
    async setfilesDB(key: string, value: any) {
      this.filesDB.setItem(key, value)
    },
  }
})

我们使用的时候，就直接调用 store 中的方法

import { useIndexedDBStore } from '@/store/indexedDB'
const indexedDBStore = useIndexedDBStore()
const file1 = {a: 'hello'}
indexedDBStore.setfilesDB('file1', file1)

 

localForage和localStorage是两种用于客户端存储数据的机制，它们有一些区别和各自的优缺点。

1. 区别：

   • API和功能：localStorage是Web Storage API的一部分，提供简单的键值对存储，只能存储字符串类型的数据。而localForage是基于IndexedDB、WebSQL和localStorage等技术封装而来，提供更强大的API和功能，可以存储复杂的数据类型（例如对象、数组等）。
   • 容量：localStorage的容量通常为5MB左右，而localForage的容量取决于使用的底层技术（如IndexedDB），一般可以达到10MB或更大。
   • 异步支持：localForage支持异步操作，可以更好地处理大量数据的读写操作；而localStorage是同步的，可能会阻塞主线程。
   • 数据存储位置：localStorage数据存储在浏览器的本地，而localForage可以选择将数据存储在IndexedDB、WebSQL或localStorage中，具有更大的灵活性。

2. 优点：

   • localForage相较于localStorage具有更强大的功能和API，可以更灵活地处理复杂数据类型。
   • localForage支持异步操作，对于大量数据的读写操作更高效。
   • localForage的容量一般较大，适合存储较大量级的数据。

3. 缺点：

   • localForage相较于localStorage会更加复杂，需要引入额外的库和依赖。
   • localForage使用IndexedDB和WebSQL等技术作为底层存储，对一些低版本浏览器可能不完全支持。
   • localForage在一些特定场景下可能性能略差，例如频繁的小数据写入。

综上所述，如果你需要简单的键值对存储并且数据量较小，可以选择使用localStorage。而如果需要处理复杂数据类型、有大量数据读写需求或希望提供更好的扩展性和异步支持，那么选择localForage会更合适。