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

Logo

快速构建 Web 应用程序

更多推荐