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

我不是女神ヾ 2024-03-26 12:07 61阅读 0赞

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);
    }