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

前言

前端有多种本地存储方案可供选择，常见的有：

1. Cookie：小型的文本文件，存储少量数据
2. Web Storage ：包括：localStorage和sessionStorage，存储数据有上限（5M）左右
3. IndexedDB：一种高级的客户端存储API，存储量大、高版本浏览器兼容性较好

这些本地存储方案各有优缺点，近期发现一种前端本地存储的库 localForage，遵循“渐进增强”或“优雅降级”的原则，集合以上多种方式，使用异步API封装了Web Storage、IndexedDB和WebSQL的库，提供了简单易用的方法来存储和检索数据，API 相对简单，易于上手，下面开始正式介绍localForage用法。

localForage

localForage 是一个快速而简单的 JavaScript 存储库。通过使用异步存储（IndexedDB 或 WebSQL）和简单的类 localStorage 的 API ，localForage 能改善 Web 应用的离线体验。

在不支持 IndexedDB 或 WebSQL 的浏览器中，localForage 使用 localStorage。

github地址： https://github.com/localForage/localForage
API文档：https://localforage.github.io/localForage/#data-api-setitem

第一种使用方法

1. 安装引入

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

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

2. 创建indexedDB

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

3. 存值

//存储字符串
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}]);

4. 取值 （由于indexedDB的存取都是异步的，建议使用 promise.then() 或 async/await 去读值，如果 key 不存在，getItem() 将返回 null。）

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