38 lines
986 B
TypeScript
38 lines
986 B
TypeScript
import { ref, watch, type Ref } from "vue";
|
|
|
|
/**
|
|
* 将任意响应式数据与 sessionStorage 双向绑定
|
|
* @param key sessionStorage 的 key
|
|
* @param def 默认值（当 sessionStorage 没有时）
|
|
* @param reviver 可选：解析时用 JSON.parse 的第二个参数
|
|
* @returns Ref<T>
|
|
*/
|
|
export function useSessionStorage<T>(
|
|
key: string,
|
|
def: T,
|
|
reviver?: (this: any, key: string, value: any) => any,
|
|
): Ref<T> {
|
|
/* ---------- 初始化 ---------- */
|
|
const raw = sessionStorage.getItem(key);
|
|
let init: T = def;
|
|
if (raw) {
|
|
try {
|
|
init = JSON.parse(raw, reviver);
|
|
} catch {
|
|
/* 解析失败回退默认值 */
|
|
}
|
|
}
|
|
const state = ref<T>(init) as Ref<T>;
|
|
|
|
/* ---------- 变化时落盘 ---------- */
|
|
watch(
|
|
state,
|
|
newVal => {
|
|
sessionStorage.setItem(key, JSON.stringify(newVal));
|
|
},
|
|
{ deep: true, flush: "post" },
|
|
);
|
|
|
|
return state;
|
|
}
|