Vue3后台管理系统（五）永久缓存Local Storage

最新推荐文章于 2026-06-22 12:13:04 发布

原创最新推荐文章于 2026-06-22 12:13:04 发布 · 1.2w 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#缓存 #前端 #javascript

Vue3后台管理系统搭建和开发专栏收录该内容

19 篇文章

订阅专栏

文章介绍了如何在前端项目中使用localStorage进行持久化本地存储，包括设置、获取、删除和清除数据的方法，特别应用在存储侧边栏状态、布局大小和国际语言选择上。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。一般用于存储用户的使用习惯。

一、在src/utils文件夹下新建localStorage.ts文件

存储一下侧边栏状态、布局大小和国际语言

// src/utils/localStorage.ts
/**
 * window.localStorage 浏览器永久缓存
 */
export const localStorage = {
  // 设置永久缓存
  set(key: string, val: any) {
    window.localStorage.setItem(key, JSON.stringify(val));
  },
  // 获取永久缓存
  get(key: string) {
    const json: any = window.localStorage.getItem(key);
    return JSON.parse(json);
  },
  // 移除永久缓存
  remove(key: string) {
    window.localStorage.removeItem(key);
  },
  // 移除全部永久缓存
  clear() {
    window.localStorage.clear();
  }
};

// 侧边栏状态(显示/隐藏)
const SidebarStatusKey = 'sidebarStatus';
export function getSidebarStatus() {
  return localStorage.get(SidebarStatusKey);
}

export function setSidebarStatus(sidebarStatus: string) {
  localStorage.set(SidebarStatusKey, sidebarStatus);
}
// 布局大小
const SizeKey = 'size';

export function getSize() {
  return localStorage.get(SizeKey);
}

export function setSize(size: string) {
  localStorage.set(SizeKey, size);
}

// 语言
const LanguageKey = 'language';

export function getLanguage() {
  return localStorage.get(LanguageKey);
}

export function setLanguage(language: string) {
  localStorage.set(LanguageKey, language);
}

二、使用

import {
  getSidebarStatus,
  setSidebarStatus,
  getSize,
  setSize,
  setLanguage
} from '@/utils/localStorage';

function changeLanguage(val: string) {
  language.value = val;
  setLanguage(val);
}