前端本地存储方案localForage在vue3中使用方法

// 通过npm安装
npm install --save localforage
// 引入
import localforage from 'localforage'

// 或通过 bower 引入
<script src="localforage.js"></script>

const firstIndexedDB = localforage.createInstance({
  name: 'myFirstIndexedDB',
  // 支持config所有配置
  // storeName: 'keyvaluepairs', // 仅接受字母，数字和下划线
})

//存储字符串
firstIndexedDB.setItem("data1", "今天是个好日子");
//存储对象
firstIndexedDB.setItem("data2", {a:1,b: 2});
//存储数组对象
firstIndexedDB.setItem("data3", [{a:1,b: 2}, {a:2,b:3}, {a:3,b:4}]);

//第一种方法
firstIndexedDB.getItem('data1').then(value=> {
 console.log("数据data1",value);
}).catch(err => {
  console.log('错误信息', err)
});
firstIndexedDB.getItem('data2').then(value=> {
 console.log("数据data2",value);
}).catch(err => {
  console.log('错误信息', err)
});

//第二种方法
try {
  const value = await firstIndexedDB.getItem('data3');
  console.log("数据3",value);
} catch (err) {
    console.log('错误信息', err)
}

//输入key值
firstIndexedDB.removeItem('data3');

firstIndexedDB.clear();

firstIndexedDB.length().then(numberOfKeys=> {
    // 输出数据库的大小
    console.log("数据库长度",numberOfKeys);
}).catch(function(err) {
    console.log("出错",err);
});

firstIndexedDB.key(2).then(keyName=> {
    // key 名
    console.log("key 名",keyName);
}).catch(function(err) {
    console.log("出错",err);
});

firstIndexedDB.keys().then(function(keys) {
    console.log("所有key集合",keys);
}).catch(function(err) {
    console.log("出错",err);
});

 firstIndexedDB.iterate(function(value, key, iterationNumber) {
     // 此回调函数将对所有 key/value 键值对运行
     console.log([key, value,iterationNumber]);
 }).then(function() {
     console.log('迭代完成');
 }).catch(function(err) {
     console.log("出错",err);
 });

 firstIndexedDB.iterate(function(value, key, iterationNumber) {
    // 此回调函数将对所有 key/value 键值对运行
      if (iterationNumber < 3) {
          console.log([key, value, iterationNumber]);
      } else {
          return [key, value, iterationNumber];
      }
  }).then(function() {
      console.log('退出迭代');
  }).catch(function(err) {
      console.log("出错",err);
  });

var secondIndexedDB = localforage.createInstance({
  name: "secondIndexedDB"
});

var thirdIndexedDB = localforage.createInstance({
  name: "thirdIndexedDB"
});

secondIndexedDB.setItem("key", "value");
thirdIndexedDB.setItem("key", "value2");

localforage.dropInstance().then(function() {
  console.log('删除当前实例的数据仓库')
});

localforage.dropInstance({
  name: "thirdIndexedDB",
  storeName: "keyvaluepairs"
}).then(function() {
  console.log('删除指定的数据库下的指定数据仓库')
});

localforage.dropInstance({
  name: "secondIndexedDB"
}).then(function() {
  console.log('删除指定的数据库（及其所有数据仓库）')
});

localforage.setDriver(localforage.LOCALSTORAGE);

localforage.setDriver([localforage.LOCALSTORAGE, localforage.INDEXEDDB]);

localforage.config({
  driver      : localforage.LOCALSTORAGE, // 使用 LOCALSTORAGE；也可以使用 setDriver()
  name        : 'firstIndexedDB',
  version     : 1.0,
  size        : 4980736, // 数据库的大小，单位为字节。现仅 WebSQL 可用
  storeName   : 'keyvaluepairs1', // 仅接受字母，数字和下划线
  description : 'some description'
});

localforage.setItem("data1", "今天是个好日子");

localforage.ready().then(()=> {
  // 当 localforage 将指定驱动初始化完成时，此处代码运行
  console.log(localforage.driver()); //返回正在使用的驱动的名字 "asyncStorage"
}).catch( e=> {
  console.log(e); // `No available storage method found.`
  // 当没有可用的驱动时，`ready()` 将会失败
});

console.log(localforage.supports(localforage.INDEXEDDB));