Vue element admin 浏览器本地存储 localStorage、useStorage

VipSoft2025-08-25 14:38

目录

  • [localStorage 与 useStorage 的区别](#localStorage 与 useStorage 的区别)
    • [localStorage（原生 API）](#localStorage（原生 API）)
    • [useStorage（VueUse 工具函数）](#useStorage（VueUse 工具函数）)
    • 对比示例
    • 总结
  • [删除 userInfo 的 key 方法](#删除 userInfo 的 key 方法)
    • [1. 使用 useStorage 的推荐方式](#1. 使用 useStorage 的推荐方式)
    • [2. 手动删除 localStorage 的 key](#2. 手动删除 localStorage 的 key)
    • [3. 完整的清除方案](#3. 完整的清除方案)
    • [4. 验证 key 是否被删除](#4. 验证 key 是否被删除)
    • 推荐方案

在你的代码中，userInfo 的浏览器本地存储是在 defineStore("user", () => { ... }) 函数内部的第一行实现的 ：

auth.ts

js 复制代码 
// 访问 token 缓存的 key
const ACCESS_TOKEN_KEY = "access_token";
// 刷新 token 缓存的 key
const REFRESH_TOKEN_KEY = "refresh_token";

function getAccessToken(): string {
  return localStorage.getItem(ACCESS_TOKEN_KEY) || "";
}

function setAccessToken(token: string) {
  localStorage.setItem(ACCESS_TOKEN_KEY, token);
}

function getRefreshToken(): string {
  return localStorage.getItem(REFRESH_TOKEN_KEY) || "";
}

function setRefreshToken(token: string) {
  localStorage.setItem(REFRESH_TOKEN_KEY, token);
}

function clearToken() {
  localStorage.removeItem(ACCESS_TOKEN_KEY);
  localStorage.removeItem(REFRESH_TOKEN_KEY);
}

export { getAccessToken, setAccessToken, clearToken, getRefreshToken, setRefreshToken };
js 复制代码 
import { setAccessToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/auth";

export const useUserStore = defineStore("user", () => {
  const userInfo = useStorage<UserInfo>("userInfo", {} as UserInfo);
  const roleList = useStorage<RoleInfo[]>("roleList", []);
  
  
  /**
   * 登录
   *
   * @param {LoginFormData}
   * @returns
   */
  function login(LoginFormData: LoginFormData) {
    return new Promise<void>((resolve, reject) => {
      console.log("modules.user.login");
      AuthAPI.login(LoginFormData)
        .then((data) => {
          const { accessToken, user } = data;
          setAccessToken(accessToken);
          if (User.RoleList && Array.isArray(user.RoleList)) {
            roleList.value = user.RoleList;
          } else {
            roleList.value = []; // 确保总是数组
            console.warn("RoleList is not an array or is undefined");
          }
          resolve();
        })
        .catch((error) => {
          reject(error);
        });
    });
  }
  
    /**
   * 获取用户信息
   *
   * @returns {UserInfo} 用户信息
   */
  function getUserInfo() {
    return new Promise<UserInfo>((resolve, reject) => {
      UserAPI.getInfo()
        .then((data) => {
          if (!data) {
            reject("Verification failed, please Login again.");
            return;
          }
          Object.assign(userInfo.value, { ...data });
          resolve(data);
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

这行代码是关键，

typescript 复制代码 
const userInfo = useStorage<UserInfo>("userInfo", {} as UserInfo);

它使用了 useStorage 函数（通常来自 @vueuse/core 或类似的工具库）来创建一个响应式的引用，该引用会自动将数据持久化到浏览器的本地存储中。

具体分析：

  1. 存储时机 ：当调用 getUserInfo() 方法时，通过这行代码：

    typescript 复制代码 
    Object.assign(userInfo.value, { ...data });

    将获取到的用户数据赋值给 userInfo.value，此时 useStorage 会自动将这些数据保存到 localStorage。

  2. 存储位置 ：数据会被存储在浏览器的 localStorage 中，键名为 "userInfo"。

  3. 自动持久化 ：useStorage 会自动处理：

    • 初始时从 localStorage 读取数据
    • 数据变更时自动写入 localStorage
    • 页面刷新后数据仍然保持

验证方式 ：

你可以在浏览器开发者工具中查看：

  1. 打开「Application」标签页
  2. 选择「Local Storage」
  3. 查看你的网站域名下是否存在 userInfo 这个键，其值就是序列化的用户信息

注意 ：clearUserData() 函数中没有直接清除 userInfo，你可能需要在其中添加：

typescript 复制代码 
userInfo.value = {} as UserInfo;     // 保持响应式一致性
roleList.value = [] as RoleInfo[];   // 保持响应式一致性

来确保用户登出时本地存储的用户信息也被清除。

localStorage 与 useStorage 的区别

localStorage（原生 API）

直接操作本地存储的原生浏览器 API：

javascript 复制代码 
// 存储数据
localStorage.setItem('userInfo', JSON.stringify(userData));

// 读取数据
const data = JSON.parse(localStorage.getItem('userInfo') || '{}');

// 删除数据
localStorage.removeItem('userInfo');

// 清空所有
localStorage.clear();

特点：

  • ✅ 浏览器原生支持，无需额外依赖
  • ❌ 需要手动序列化/反序列化（JSON.stringify/JSON.parse）
  • ❌ 不是响应式的，数据变更不会自动更新界面
  • ❌ 需要手动处理存储和读取逻辑

useStorage（VueUse 工具函数）

基于 localStorage 封装的响应式工具函数：

typescript 复制代码 
import { useStorage } from '@vueuse/core';

// 自动处理序列化和响应式
const userInfo = useStorage('userInfo', {} as UserInfo);

// 直接赋值，自动保存到 localStorage
userInfo.value = newData;

// 读取数据，直接使用即可
console.log(userInfo.value);

特点：

  • ✅ 自动序列化/反序列化
  • ✅ 响应式，数据变更自动更新界面
  • ✅ 与 Vue 响应式系统无缝集成
  • ✅ 类型安全（TypeScript 支持）
  • ❌ 需要安装 @vueuse/core 依赖

对比示例

使用 localStorage：

javascript 复制代码 
// 需要手动处理
const user = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'));

function updateUser(newData) {
  user.value = newData;
  localStorage.setItem('userInfo', JSON.stringify(newData)); // 手动保存
}

使用 useStorage：

typescript 复制代码 
// 自动处理一切
const user = useStorage('userInfo', {});

function updateUser(newData) {
  user.value = newData; // 自动保存到 localStorage
}

总结

特性 localStorage useStorage
响应式 ❌ 否 ✅ 是
自动序列化 ❌ 需要手动 ✅ 自动
Vue 集成 ❌ 需要封装 ✅ 无缝集成
类型安全 ❌ 有限 ✅ 完整TS支持
使用便捷性 ❌ 较低 ✅ 极高

推荐使用 useStorage，特别是在 Vue 项目中，它能极大简化本地存储的操作并提供更好的开发体验。

删除 userInfo 的 key 方法

1. 使用 useStorage 的推荐方式

如果你使用的是 @vueuse/core 的 useStorage：

typescript 复制代码 
import { useStorage } from '@vueuse/core';

// 清除数据并移除 key
function clearUserData() {
  return new Promise<void>((resolve) => {
    clearToken();
    usePermissionStoreHook().resetRouter();
    useDictStoreHook().clearDictionaryCache();
    //清除数据，key 还在
    userInfo.value = {} as UserInfo;
    // 推荐方式：直接设置为 null 或 undefined，useStorage 会自动移除 key
    userInfo.value = null as any;
    // 或者
    // userInfo.value = undefined as any;
    
    resolve();
  });
}

2. 手动删除 localStorage 的 key

typescript 复制代码 
function clearUserData() {
  return new Promise<void>((resolve) => {
    clearToken();
    usePermissionStoreHook().resetRouter();
    useDictStoreHook().clearDictionaryCache();
    
    // 方式1：直接操作 localStorage
    localStorage.removeItem('userInfo');
    
    // 方式2：如果还想保持响应式，需要重新赋值
    userInfo.value = {} as UserInfo;
    
    resolve();
  });
}

3. 完整的清除方案

typescript 复制代码 
/**
 * 清理用户数据（完全清除）
 */
function clearUserDataCompletely() {
  return new Promise<void>((resolve) => {
    clearToken();
    usePermissionStoreHook().resetRouter();
    useDictStoreHook().clearDictionaryCache();
    
    // 方案A：使用 localStorage.removeItem（推荐）
    localStorage.removeItem('userInfo');
    userInfo.value = {} as UserInfo; // 保持响应式一致性
    
    // 方案B：设置为 null/undefined（useStorage 会自动处理）
    // userInfo.value = null as any;
    
    resolve();
  });
}

4. 验证 key 是否被删除

typescript 复制代码 
// 检查 key 是否存在的方法
function isUserInfoKeyExists(): boolean {
  return localStorage.getItem('userInfo') !== null;
}

// 使用示例
console.log('userInfo key exists:', isUserInfoKeyExists()); // false

推荐方案

在你的 clearUserData 函数中这样实现：

typescript 复制代码 
function clearUserData() {
  return new Promise<void>((resolve) => {
    clearToken();
    usePermissionStoreHook().resetRouter();
    useDictStoreHook().clearDictionaryCache();
    
    // 同时操作 localStorage 和响应式变量
    localStorage.removeItem('userInfo'); // 删除 key
    userInfo.value = {} as UserInfo;     // 重置响应式变量
    
    resolve();
  });
}

这样就能确保：

  1. ✅ localStorage 中的 userInfo key 被完全删除
  2. ✅ 响应式变量保持一致性
  3. ✅ 下次访问时不会读取到旧的缓存数据
热门推荐
01UV安装并设置国内源02Cursor 快速入门指南：从安装到核心功能03【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）04如何在Windows/Linux系统上安装adb0520个国内外主流AI绘画工具大汇总（最新免费可用~）06【踩坑笔记】50系显卡适配的 PyTorch 安装07KGG转MP3工具|非KGM文件|解密音频082025最新国内服务器可用docker源仓库地址大全（2025年8月更新）09UnityHub Validation Failed下载编辑器错误，添加模块报错的解决方案10Claude Code VSCode集成开发指南：AI编程助手完整配置