Vue3中可否将LocalStorage与响应式变量绑定？FileSystem是否更适配？

问题1解答 #

该方案完全可实现，无需复杂逻辑，借助Vue3组合式API封装通用工具函数即可达成双向绑定效果：

1. 初始化阶段先读取LocalStorage对应key的值作为响应式变量的初始值
2. 用watch深度监听响应式变量的变更，变化后自动写入LocalStorage
3. 监听全局storage事件，当其他标签页/外部程序修改了对应LocalStorage值时，自动同步更新到响应式变量

参考实现代码：

import { ref, watch, onMounted, onUnmounted } from 'vue'

// 封装通用的LocalStorage响应式绑定工具
function useLocalStorage(key, defaultValue) {
  // 初始化从LocalStorage取值，无值则用默认值
  const reactiveValue = ref(
    JSON.parse(localStorage.getItem(key) ?? JSON.stringify(defaultValue))
  )

  // 响应式变量变更自动持久化到LocalStorage
  watch(reactiveValue, (newVal) => {
    localStorage.setItem(key, JSON.stringify(newVal))
  }, { deep: true })

  // 监听外部修改LocalStorage的事件，同步更新响应式变量
  const handleStorageUpdate = (e) => {
    if (e.key === key) {
      reactiveValue.value = JSON.parse(e.newValue ?? JSON.stringify(defaultValue))
    }
  }

  onMounted(() => window.addEventListener('storage', handleStorageUpdate))
  onUnmounted(() => window.removeEventListener('storage', handleStorageUpdate))

  return reactiveValue
}

// 业务中使用示例
const userPref = useLocalStorage('user_preference', { theme: 'light', noticeOpen: true })

你提到的旧结论说Vue原生不支持该能力确实成立，但Vue3的组合式API允许我们用极少量代码自行实现，不需要复杂的同步逻辑，完全满足你的需求。

问题2解答 #

FileSystemAPI并不适配你的需求，原因如下：

• 定位差异：LocalStorage是为小体量结构化数据持久化设计的轻量存储，FileSystemAPI核心能力是操作用户本地的文件/目录，主要面向需要读写本地大文件的场景（比如在线文档编辑器、批量图片处理工具等）
• 成本更高：FileSystemAPI需要用户主动授予文件读写权限，且大部分场景下页面刷新后权限会失效，需要用户重新授权，普通应用状态持久化用这个方案会大幅提高用户使用成本
• 无额外优势：即便用FileSystemAPI，你仍然需要自行实现文件内容和响应式变量的双向绑定逻辑，不存在比LocalStorage更简便的同步机制

如果你的业务没有读写本地大文件的需求，完全不需要用FileSystem替代LocalStorage。

内容的提问来源于stack exchange，提问作者WoJ