useStorageRef - Vue 响应式存储

通用场景：任何需要响应式数据自动持久化的场景，核心是让数据在页面刷新或重新访问时保持不丢失。

具体应用：

表单数据临时保存（防止意外刷新丢失）
用户偏好设置持久化
搜索条件记忆
购物车数据保存
任何需要跨会话保持的状态数据

解决问题：避免手动管理存储的读写操作，让响应式数据自动与浏览器存储同步，简化数据持久化逻辑。

避免重复代码：

const data = ref("");

// 手动读取存储
onMounted(() => {
  data.value = localStorage.getItem("key") || "";
});

// 手动监听变化并保存
watch(data, newVal => {
  localStorage.setItem("key", newVal);
});

useStorage.ts

typescript

import { customRef } from "vue";

interface optionsType {
  storage: Storage;
  toJSON: boolean;
}

export function useStorageRef(key: string, initialValue: any = "", options: Partial<optionsType> = {}) {
  const { storage = localStorage, toJSON = false } = options;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        const value = storage.getItem(key) || initialValue;
        return toJSON ? JSON.parse(value) : value;
      },
      set(value: any) {
        const prev = storage.getItem(key);
        if (prev === value) return;
        storage.setItem(key, toJSON ? JSON.stringify(value) : value);
        trigger();
      },
    };
  });
}

index.vue

vue

<template>
  <el-input v-model="value" placeholder="请输入内容" />
</template>

<script lang="ts" setup>
import { useStorageRef } from "./useStorageRef.ts";

const value = useStorageRef("keys");
</script>

useStorageRef - Vue 响应式存储 ​

useStorageRef - Vue 响应式存储