Vue封装localStorage设置过期时间的示例详解

// 设置带有过期时间的数据到 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;
}

// 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>