浏览器本地化持久存储 localforage的使用

localForage是一个快速、简单的JavaScript存储库，它提供了一个异步的、类似localStorage的API，但具有更强大的功能。它利用IndexedDB、WebSQL和localStorage（按此优先级）来存储数据，使得在不同的浏览器上提供一致的异步存储体验。以下是localForage的基本使用方法：

引入localForage

首先，你需要将localForage引入到你的项目中。你可以通过npm安装或直接从CDN引入。

通过npm安装：

npm install localforage

然后在你的项目中引入：

import localforage from 'localforage';

或者，直接从CDN引入：

<script src="https://cdn.jsdelivr.net/npm/localforage@latest/dist/localforage.js"></script>

设置数据

使用setItem方法来存储数据，它接受一个键和值。

localforage.setItem('key', 'value').then(function (value) {
    // 当值被存储后的回调处理
    console.log(value);
}).catch(function(err) {
    // 发生错误时的处理
    console.log(err);
});

获取数据

使用getItem方法来获取之前存储的数据，它接受一个键。

localforage.getItem('key').then(function(value) {
    // 获取到值时的处理
    console.log(value);
}).catch(function(err) {
    // 发生错误时的处理
    console.log(err);
});

删除数据

使用removeItem方法来删除存储的数据，它接受一个键。

localforage.removeItem('key').then(function() {
    // 数据删除成功的处理
    console.log('Item removed');
}).catch(function(err) {
    // 发生错误时的处理
    console.log(err);
});

清除所有数据

使用clear方法可以清除所有存储的数据。

localforage.clear().then(function() {
    // 数据库清空后的处理
    console.log('Database is now empty.');
}).catch(function(err) {
    // 发生错误时的处理
    console.log(err);
});

localForage还提供了其他一些有用的方法和配置选项，比如设置存储驱动、配置数据存储的名称等。

localForage的setItem方法可以直接存储一个对象。当你尝试存储一个对象时，localForage会自动将对象转换为字符串（使用JSON.stringify），以便存储。当你使用getItem方法获取数据时，它会自动将字符串转换回原始对象（使用JSON.parse），这样你就可以直接操作该对象了。

下面是一个存储和检索对象的例子：

存储对象

const myObject = {
  name: 'localForage',
  type: 'library',
  features: ['Fast', 'Simple', 'Lightweight']
};

localforage.setItem('myObjectKey', myObject).then(function(value) {
    // 存储成功后的回调处理
    console.log(value);
}).catch(function(err) {
    // 发生错误时的处理
    console.log(err);
});

获取对象

localforage.getItem('myObjectKey').then(function(value) {
    // 获取到对象时的处理
    // value 将是一个对象，和存储时相同
    console.log(value);
}).catch(function(err) {
    // 发生错误时的处理
    console.log(err);
});

这种方式让localForage非常方便用于存储复杂的数据结构，而不仅仅是字符串。因此，你可以轻松地存储和检索对象、数组等数据类型，而不需要自己手动进行序列化或反序列化。