【前端工具类】001-本地存储工具类:LocalStorageUtil
一、ts 写法
class LocalStorageUtil {
static get(key: string): any {
const value = localStorage.getItem(key);
if (value) {
return JSON.parse(value);
}
return null;
}
static set(key: string, value: any): void {
localStorage.setItem(key, JSON.stringify(value));
}
static remove(key: string): void {
localStorage.removeItem(key);
}
static clear(): void {
localStorage.clear();
}
}
二、vue3 usexxx 写法
1、代码
import {ref} from "vue";
export function useLocalStorage(
key: string,
defaultValue: any
) {
const value = ref(defaultValue);
const load = () => {
const storedValue = localStorage.getItem(key);
if (storedValue !== null) {
try {
value.value = JSON.parse(storedValue);
} catch (e) {
console.warn(`Unable to parse stored value for key ${key}:`, e);
}
}
};
const save = () => {
try {
localStorage.setItem(key, JSON.stringify(value.value));
} catch (e) {
console.warn(`Unable to store value for key ${key}:`, e);
}
};
const clear = () => {
localStorage.removeItem(key);
value.value = defaultValue;
};
load();
window.addEventListener("beforeunload", save);
return {value, clear};
}
2、使用示例
<template>
<div>
<p>当前计数:{{ count }}</p>
<button @click="increment">增加</button>
<button @click="clear">清除本地存储</button>
</div>
</template>
<script>
import { useLocalStorage } from "@/utils/WindowSizeTracker";
export default {
setup() {
const { value: count, clear } = useLocalStorage("count", 0);
const increment = () => {
count.value += 1;
};
return { count, increment, clear };
},
};
</script>