Vue3后台管理系统(五)永久缓存Local Storage
Vue3后台管理系统(五)永久缓存Local Storage
·
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);
}
更多推荐
所有评论(0)