yunzer_go/pc/docs/获取缓存数据.md

# 获取缓存数据 - userinfo 实例

## 方法一：从 localStorage 获取

```javascript
// 获取用户信息
function getUserInfo() {
  try {
    const userInfoStr = localStorage.getItem('userinfo');
    if (userInfoStr) {
      const userInfo = JSON.parse(userInfoStr);
      return userInfo;
    }
    return null;
  } catch (error) {
    console.error('获取用户信息失败:', error);
    return null;
  }
}

// 使用示例
const userInfo = getUserInfo();
if (userInfo) {
  console.log('用户名:', userInfo.username);
  console.log('用户ID:', userInfo.id);
  console.log('角色:', userInfo.role);
} else {
  console.log('未找到用户信息');
}
```

## 方法二：在 Vue 组件中使用

```vue
<template>
  <div>
    <h3>用户信息</h3>
    <p v-if="userInfo">欢迎, {{ userInfo.username }}</p>
    <p v-else>请先登录</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const userInfo = ref(null);

// 获取用户信息
function getUserInfo() {
  try {
    const userInfoStr = localStorage.getItem('userinfo');
    if (userInfoStr) {
      userInfo.value = JSON.parse(userInfoStr);
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
}

onMounted(() => {
  getUserInfo();
});
</script>
```

## 方法三：使用工具函数

```javascript
// utils/storage.js
export class StorageUtil {
  // 获取用户信息
  static getUserInfo() {
    try {
      const userInfoStr = localStorage.getItem('userinfo');
      return userInfoStr ? JSON.parse(userInfoStr) : null;
    } catch (error) {
      console.error('获取用户信息失败:', error);
      return null;
    }
  }

  // 设置用户信息
  static setUserInfo(userInfo) {
    try {
      localStorage.setItem('userinfo', JSON.stringify(userInfo));
    } catch (error) {
      console.error('保存用户信息失败:', error);
    }
  }

  // 清除用户信息
  static clearUserInfo() {
    localStorage.removeItem('userinfo');
  }

  // 检查是否已登录
  static isLoggedIn() {
    const userInfo = this.getUserInfo();
    return userInfo && userInfo.id;
  }
}

// 使用示例
import { StorageUtil } from '@/utils/storage';

// 获取用户信息
const userInfo = StorageUtil.getUserInfo();
console.log('用户信息:', userInfo);

// 检查登录状态
if (StorageUtil.isLoggedIn()) {
  console.log('用户已登录');
} else {
  console.log('用户未登录');
}
```

## 方法四：使用 Pinia store

```javascript
// stores/user.js
import { defineStore } from 'pinia';
import { StorageUtil } from '@/utils/storage';

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null
  }),

  getters: {
    isLoggedIn: (state) => state.userInfo && state.userInfo.id,
    username: (state) => state.userInfo?.username || ''
  },

  actions: {
    // 初始化用户信息（从缓存加载）
    initUserInfo() {
      this.userInfo = StorageUtil.getUserInfo();
    },

    // 设置用户信息
    setUserInfo(userInfo) {
      this.userInfo = userInfo;
      StorageUtil.setUserInfo(userInfo);
    },

    // 清除用户信息
    clearUserInfo() {
      this.userInfo = null;
      StorageUtil.clearUserInfo();
    },

    // 登录
    login(userInfo) {
      this.setUserInfo(userInfo);
    },

    // 登出
    logout() {
      this.clearUserInfo();
    }
  }
});

// 在组件中使用
import { useUserStore } from '@/stores/user';

export default {
  setup() {
    const userStore = useUserStore();

    // 初始化时加载用户信息
    onMounted(() => {
      userStore.initUserInfo();
    });

    return {
      userInfo: computed(() => userStore.userInfo),
      isLoggedIn: computed(() => userStore.isLoggedIn)
    };
  }
};
```

## 方法五：使用 sessionStorage

```javascript
// 获取用户信息（仅在当前会话有效）
function getUserInfoFromSession() {
  try {
    const userInfoStr = sessionStorage.getItem('userinfo');
    return userInfoStr ? JSON.parse(userInfoStr) : null;
  } catch (error) {
    console.error('获取用户信息失败:', error);
    return null;
  }
}

// 设置用户信息到 sessionStorage
function setUserInfoToSession(userInfo) {
  try {
    sessionStorage.setItem('userinfo', JSON.stringify(userInfo));
  } catch (error) {
    console.error('保存用户信息失败:', error);
  }
}

// 清除 sessionStorage 中的用户信息
function clearUserInfoFromSession() {
  sessionStorage.removeItem('userinfo');
}
```

## 注意事项

1. **数据类型**: 缓存中存储的是字符串，需要使用 `JSON.parse()` 转换为对象
2. **错误处理**: 务必使用 try-catch 处理 JSON 解析错误
3. **数据验证**: 获取到数据后应该验证数据的完整性
4. **安全性**: 敏感信息不要直接存储在前端缓存中
5. **过期处理**: 可以添加时间戳来处理缓存过期逻辑

## 完整示例

```javascript
// 获取用户信息，包含过期检查
function getUserInfoWithExpiry() {
  try {
    const userInfoStr = localStorage.getItem('userinfo');
    if (!userInfoStr) return null;

    const userInfo = JSON.parse(userInfoStr);

    // 检查是否过期（可选）
    if (userInfo.expiry && Date.now() > userInfo.expiry) {
      localStorage.removeItem('userinfo');
      return null;
    }

    return userInfo;
  } catch (error) {
    console.error('获取用户信息失败:', error);
    localStorage.removeItem('userinfo'); // 清除损坏的数据
    return null;
  }
}

// 设置用户信息，包含过期时间
function setUserInfoWithExpiry(userInfo, expiryHours = 24) {
  try {
    const userInfoWithExpiry = {
      ...userInfo,
      expiry: Date.now() + (expiryHours * 60 * 60 * 1000) // 过期时间
    };
    localStorage.setItem('userinfo', JSON.stringify(userInfoWithExpiry));
  } catch (error) {
    console.error('保存用户信息失败:', error);
  }
}
```