Vue封装localStorage设置过期时间

一、前言

在这个示例中，我们在MyComponent.vue组件的setup函数中导入了setItemWithExpiry和getItemWithExpiry函数，并在函数内部使用它们来设置和获取带有过期时间的localStorage数据。

请确保在localStorageUtil.js文件中导出了工具函数，并使用正确的路径导入它们。另外，需要根据实际的项目结构和需求进行适当的调整。

localStorage并没有内建的过期时间设置功能。存储在localStorage中的数据将一直保留，直到被显式删除或浏览器缓存被清除。如果你想要在localStorage中设置数据的过期时间，你需要手动实现这个功能。

你可以在存储数据时，同时存储一个时间戳，表示数据的过期时间。然后在访问数据时，检查时间戳是否已经过期，如果过期则删除数据。

1.工具类

以下是一个简单的示例代码，演示如何在localStorage中实现数据的过期时间：
当使用Vue 3的Composition API时，可以将上述内容放入一个名为localStorageUtil.js的工具类中。下面是一个示例：

// 设置带有过期时间的数据到 localStorage
export function setItemWithExpiry(key, value, expirySeconds) {
  const now = new Date();
  const item = {
    value: value,
    expiry: now.getTime() + (expirySeconds * 1000) // 将过期时间转换为毫秒
  };
  localStorage.setItem(key, JSON.stringify(item));
}

// 从 localStorage 获取数据，并检查是否过期
export function getItemWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) {
    return null;
  }
  const item = JSON.parse(itemStr);
  const now = new Date();
  if (now.getTime() > item.expiry) {
    // 数据已过期，删除并返回 null
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

2.导入工具类并使用

然后，在Vue 3的组件中，可以使用setup函数导入和使用localStorageUtil.js中的工具函数：

// MyComponent.vue

<template>
  ...
</template>

<script>
import { setItemWithExpiry, getItemWithExpiry } from '@/utils/localStorageUtil';

export default {
  setup() {
    // 示例用法
    setItemWithExpiry('myData', { name: 'John' }, 3600); // 设置数据，并指定过期时间为3600秒（1小时）
    const data = getItemWithExpiry('myData'); // 获取数据
    console.log(data); // 输出: { name: 'John' } 或 null（如果数据已过期）

    // 返回组件需要的数据和方法
    return {
      data
    };
  }
};
</script>

<style>
...
</style>

在这个示例中，我们在MyComponent.vue组件的setup函数中导入了setItemWithExpiry和getItemWithExpiry函数，并在函数内部使用它们来设置和获取带有过期时间的localStorage数据。

请确保在localStorageUtil.js文件中导出了工具函数，并使用正确的路径导入它们。另外，需要根据实际的项目结构和需求进行适当的调整。