使用localForage实现带过期时间的本地存储方案_Javascript

前言

在前端开发中，我们经常需要将数据存储在客户端，以减少网络请求次数，提高用户体验。localstorage 和 sessionstorage 是常用的存储方案，但它们有一些局限性，例如同步 api、只能存储字符串以及大小限制等。为了解决这些问题，本文将介绍如何使用 localforage 实现一个带过期时间的本地存储方案。

什么是 localforage？

localforage 是一个优雅的本地存储库，提供了异步的 api，支持存储多种类型的数据（如对象、数组、二进制数据等），并且在内部优先使用 indexeddb，如果不可用则回退到 websql 或 localstorage。

需求分析

我们希望实现以下功能：

数据存储：能够存储任意类型的数据。
过期时间：支持设置数据的过期时间，过期后自动清除。
持久化：数据在刷新或重新打开页面后仍然存在，直到过期时间到达。

实现思路

为了实现带过期时间的本地存储，我们需要在存储数据的同时，记录其过期时间。在读取数据时，先检查是否过期，若未过期则返回数据，否则删除数据并返回 null。

代码实现

下面是具体的代码实现：

import localforage from 'localforage';

// 配置 localforage
localforage.config({
  name: '存储名称，请根据项目名称和需求来命名',
});

// 定义一个永不过期的标志
const never_expires_flag = -1;

/**
 * 设置存储项
 * @param k 键名
 * @param v 值
 * @param expired 过期时间（分钟），默认永不过期
 * @returns promise
 */
export const setitem = (k: string, v: any, expired: number = -1) => {
  const expiredkey = `${k}__expires__`;
  let exp = 0;

  if (expired === never_expires_flag) {
    exp = never_expires_flag;
  } else if (expired >= 0) {
    exp = date.now() + 1000 * 60 * expired;
  }

  // 存储过期时间
  localforage.setitem(expiredkey, exp.tostring()).catch((err) => {
    console.error('设置过期时间失败:', err);
  });

  // 存储实际数据
  return localforage.setitem(k, v);
};

/**
 * 获取存储项
 * @param k 键名
 * @returns promise<any | null>
 */
export const getitem = async (k: string) => {
  const expiredkey = `${k}__expires__`;

  try {
    const expiredvalue = await localforage.getitem<string | null>(expiredkey);

    if (expiredvalue === null) {
      // 未设置过期时间，视为不存在
      return null;
    }

    const expiredtime = parseint(expiredvalue, 10);

    if (expiredtime === never_expires_flag) {
      // 永不过期
      return localforage.getitem(k);
    }

    if (expiredtime > date.now()) {
      // 未过期，返回数据
      return localforage.getitem(k);
    } else {
      // 已过期，删除数据
      removeitem(k);
      removeitem(expiredkey);
      return null;
    }
  } catch (err) {
    console.error('获取数据失败:', err);
    return null;
  }
};

/**
 * 删除存储项
 * @param k 键名
 * @returns promise
 */
export const removeitem = (k: string) => {
  const expiredkey = `${k}__expires__`;
  localforage.removeitem(expiredkey).catch((err) => {
    console.error('删除过期时间失败:', err);
  });
  return localforage.removeitem(k);
};

代码解析

配置 localforage

localforage.config({
  name: 'bdsg-client',
});

name：为应用程序指定一个名称，便于在浏览器中区分存储。

定义永不过期的标志

const never_expires_flag = -1;

使用 -1 作为永不过期的标志。

设置存储项

export const setitem = (k: string, v: any, expired: number = -1) => {
  const expiredkey = `${k}__expires__`;
  let exp = 0;

  if (expired === never_expires_flag) {
    exp = never_expires_flag;
  } else if (expired >= 0) {
    exp = date.now() + 1000 * 60 * expired;
  }

  // 存储过期时间
  localforage.setitem(expiredkey, exp.tostring()).catch((err) => {
    console.error('设置过期时间失败:', err);
  });

  // 存储实际数据
  return localforage.setitem(k, v);
};

参数说明：
- k：键名。
- v：值。
- expired：过期时间，单位为分钟，默认为 -1（永不过期）。
实现逻辑：
- 生成一个对应的过期时间键名 expiredkey。
- 根据过期时间计算实际的过期时间戳 exp。
  - 如果 expired 为 -1，则设为 never_expires_flag。
  - 如果 expired 大于等于 0，则计算未来的时间戳。
- 使用 localforage.setitem 分别存储过期时间和实际数据。

获取存储项

export const getitem = async (k: string) => {
  const expiredkey = `${k}__expires__`;

  try {
    const expiredvalue = await localforage.getitem<string | null>(expiredkey);

    if (expiredvalue === null) {
      // 未设置过期时间，视为不存在
      return null;
    }

    const expiredtime = parseint(expiredvalue, 10);

    if (expiredtime === never_expires_flag) {
      // 永不过期
      return localforage.getitem(k);
    }

    if (expiredtime > date.now()) {
      // 未过期，返回数据
      return localforage.getitem(k);
    } else {
      // 已过期，删除数据
      removeitem(k);
      removeitem(expiredkey);
      return null;
    }
  } catch (err) {
    console.error('获取数据失败:', err);
    return null;
  }
};

实现逻辑：
- 先获取对应的过期时间 expiredvalue。
  - 如果未设置过期时间，直接返回 null。
- 将过期时间字符串转换为数字 expiredtime。
- 根据过期时间判断：
  - 如果是永不过期标志，直接返回数据。
  - 如果未过期（expiredtime > date.now()），返回数据。
  - 如果已过期，删除数据并返回 null。

删除存储项

export const removeitem = (k: string) => {
  const expiredkey = `${k}__expires__`;
  localforage.removeitem(expiredkey).catch((err) => {
    console.error('删除过期时间失败:', err);
  });
  return localforage.removeitem(k);
};

实现逻辑：
- 同时删除数据和对应的过期时间。

使用示例

// 存储数据，设置过期时间为 5 分钟
setitem('userinfo', { name: '张三', age: 28 }, 5);

// 获取数据
getitem('userinfo').then((data) => {
  if (data) {
    console.log('用户信息：', data);
  } else {
    console.log('用户信息已过期或不存在');
  }
});

// 删除数据
removeitem('userinfo');

注意事项

异步操作：localforage 的所有方法都是异步的，返回的是 promise，所以在获取数据时需要使用 then 或 async/await。
数据类型：localforage 支持存储多种数据类型，包括对象、数组、blob 等。
错误处理：在实际开发中，应对可能出现的错误进行处理，以提高代码的健壮性。

多实例存储

上面的代码实例全局只使用了一个实例存储，如果希望使用多实例存储，可以进行简单的修改，下面是一个使用组合函数的方式实现多实例存储的代码。

import localforage from 'localforage';

export const uselocalforage = (options: localforageoptions ) => {
  // 配置 localforage
  const store = localforage.createinstance({
    ...options,
  });

  // 定义一个永不过期的标志
  const never_expires_flag = -1;

  /**
   * 设置存储项
   * @param k 键名
   * @param v 值
   * @param expired 过期时间（分钟），默认永不过期
   * @returns promise
   */
  const setitem = (k: string, v: any, expired: number = -1): promise<void> => {
    const expiredkey = `${k}__expires__`;
    let exp = 0;

    if (expired === never_expires_flag) {
      exp = never_expires_flag;
    } else if (expired >= 0) {
      exp = date.now() + 1000 * 60 * expired;
    }

    // 存储过期时间
    store.setitem(expiredkey, exp.tostring()).catch((err) => {
      console.error('设置过期时间失败:', err);
    });

    // 存储实际数据
    return store.setitem(k, v);
  };

  /**
   * 获取存储项
   * @param k 键名
   * @returns promise<t | null>
   */
  const getitem = async <t> (k: string) : promise<t | null> => {
    const expiredkey = `${k}__expires__`;

    try {
      const expiredvalue = await store.getitem<string | null>(expiredkey);

      if (expiredvalue === null) {
        // 未设置过期时间，视为不存在
        return null;
      }

      const expiredtime = parseint(expiredvalue, 10);

      if (expiredtime === never_expires_flag) {
        // 永不过期
        return store.getitem(k) as t;
      }

      if (expiredtime > date.now()) {
        // 未过期，返回数据
        return store.getitem(k);
      } else {
        // 已过期，删除数据
        removeitem(k);
        removeitem(expiredkey);
        return null;
      }
    } catch (err) {
      console.error('获取数据失败:', err);
      return null;
    }
  };

  /**
   * 删除存储项
   * @param k 键名
   * @returns promise
   */
  const removeitem = (k: string) => {
    const expiredkey = `${k}__expires__`;
    store.removeitem(expiredkey).catch((err) => {
      console.error('删除过期时间失败:', err);
    });
    return store.removeitem(k);
  };

  return {
    getitem,
    setitem,
  }
}

export default uselocalforage;

使用示例

<script setup lang="ts">
import { onmounted, ref } from "vue";
import uselocalforage from "./use-local-forage";
import { user_visitor_count, show_navigator_bool } from "./storage-constants";
import demo from './demo.vue';

const localforageinstance = uselocalforage({
  name: "test",
  storename: 'storename'
});

const visitorcount = ref(0);

const loadstorage = async () => {
  try {
    const data = await localforageinstance.getitem<number>(user_visitor_count);
    visitorcount.value = data || 0;
  } catch (error) {
    console.error(error);
  } finally {
    recordvisitorcount();
  }
};
const recordvisitorcount = () => {
  localforageinstance.setitem(user_visitor_count, visitorcount.value + 1);
};

onmounted(() => {
  loadstorage();
})
</script>

<template>
  <h1 v-show="visitorcount">用户访问次数{{ visitorcount }}次</h1>
  <demo  />
</template>

不同之处是使用const store = localforage.createinstance来创建实例，每次使用创建的store 来进行操作，并且会根据命名来存放数据，这对于分类管理数据非常有用。