使用localforage持久化存储

孙泽辉

发布于：2022年2月10日

字数：384字

时长：1分钟

次浏览

听群友说 localforage 对浏览器做了兼容，并且忽略存储特性，方便使用，赶紧加到自己的项目中！

封装自己的持久化存储工具

// src/util/store.ts
import localforage from "localforage";
// 数据
interface IData {
  expires: number | null;
  data: any;
}
export default class Storage {
  // 读取数据，读不到返回 null
  static async get(key: string) {
    const result = await localforage.getItem<IData>(key);
    if (result === null) {
      return null;
    }
    if (result.expires && result.expires < Date.now()) {
      // 过期
      await Storage.remove(key);
      return null;
    }

    return result.data;
  }
  // 添加数据，过期时间单位秒
  static async set(key: string, value: any, dieTime?: number) {
    const data: IData = {
      expires: null,
      data: value,
    };
    if (dieTime) {
      // 如果有传入过期时间，则记录过期时间戳
      data.expires = Date.now() + dieTime * 1000;
    }
    return await localforage.setItem(key, data);
  }
  // 清除所有数据
  static clear = localforage.clear;
  // 移除单项数据
  static remove = localforage.removeItem;
}

使用

import store from '~/util/store'
// 提交后登录，保存返回的 token
const onSubmit = async () => {
    const response = await login();
    // 存储 token, 过期时间 10 秒
    await store.set("token", response.result.token, 10);
}

看张鑫旭老师说 localforage 这个工具对于不熟悉indexDB的同学很不错，上手成本低，但indexDB还有很多强大功能，想存储复杂数据就老老实实学一下吧。

就这样吧

附：

张老师博客：

突破本地离线存储5M限制的JS库localforage简介 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

中文仓库：

xmoyKing/localForage-cn: localForage中文仓库，localForage改进了离线存储，提供简洁健壮的API，包括 IndexedDB, WebSQL, 和 localStorage。 (github.com)