VueUse useLocalStorage & useSessionStorage 源码解析及使用指南 #

// 源码实现关系
const useLocalStorage = (key: string, initialValue: any, options?: UseStorageOptions) =>
  useStorage(key, initialValue, localStorage, options)

const useSessionStorage = (key: string, initialValue: any, options?: UseStorageOptions) =>
  useStorage(key, initialValue, sessionStorage, options)

// useLocalStorage
function useLocalStorage<T>(
  key: string,
  initialValue: MaybeRef<T>,
  options?: UseStorageOptions<T>
): RemovableRef<T>

// useSessionStorage
function useSessionStorage<T>(
  key: string,
  initialValue: MaybeRef<T>,
  options?: UseStorageOptions<T>
): RemovableRef<T>

// 浏览器环境检测
const isClient = typeof window !== 'undefined'

// useLocalStorage 实现
export function useLocalStorage<T extends string | number | boolean | object | null>(
  key: string,
  initialValue: T,
  options: UseStorageOptions<T> = {}
) {
  return useStorage(key, initialValue, isClient ? localStorage : undefined, options)
}

// useSessionStorage 实现
export function useSessionStorage<T extends string | number | boolean | object | null>(
  key: string,
  initialValue: T,
  options: UseStorageOptions<T> = {}
) {
  return useStorage(key, initialValue, isClient ? sessionStorage : undefined, options)
}

// 服务端渲染处理
const storage = isClient ? targetStorage : undefined

// 隐私模式降级处理
try {
  storage!.setItem(testKey, 'test')
  storage!.removeItem(testKey)
} catch (e) {
  fallbackToMemoryStorage()
}

// 参数类型校验
T extends(string|number|boolean|object|null)

// 跨窗口同步实现
window.addEventListener('storage', event => {
  if (event.key === key && event.storageArea === storage) {
    updateState(event)
  }
})

// 持久化用户主题设置
const theme = useLocalStorage('user-theme', 'light')

// 会话级购物车数据
const cartItems = useSessionStorage('shopping-cart', [])

// 类型安全示例
interface UserSettings {
  darkMode: boolean
  fontSize: number
}
const settings = useLocalStorage<UserSettings>('settings', {
  darkMode: true,
  fontSize: 14,
})

// 自定义序列化（日期处理）
const dateSerializer = {
  read: (v: string) => new Date(parseInt(v)),
  write: (v: Date) => v.getTime().toString(),
}

const lastLogin = useLocalStorage('last-login', new Date(), {
  serializer: dateSerializer,
})

// 写操作节流控制
const analyticsData = useLocalStorage('analytics', [], {
  flush: 'post',
  deep: true,
})

// Nuxt.js 集成示例
export const usePersistedState = (key: string, init: any) => {
  const cookie = useCookie(key)
  return process.client ? useLocalStorage(key, init) : ref(cookie.value || init)
}

// 敏感信息加密存储
const encryptSerializer = {
  read: (v: string) => decrypt(v),
  write: (v: any) => encrypt(JSON.stringify(v)),
}

const token = useLocalStorage('auth-token', null, {
  serializer: encryptSerializer,
})

// 大数据分块存储
const LARGE_DATA_KEY = 'large-data'
const chunkSize = 1024 * 1024 // 1MB

const saveLargeData = (data: string) => {
  const chunks = data.match(new RegExp(`.{1,${chunkSize}}`, 'g')) || []
  useLocalStorage(`${LARGE_DATA_KEY}-chunks`, chunks.length)
  chunks.forEach((chunk, i) => {
    useLocalStorage(`${LARGE_DATA_KEY}-${i}`, chunk)
  })
}

// 存储失败降级示例
const persistentState = useLocalStorage(
  'important-data',
  {},
  {
    onError: e => {
      console.error('存储失败，降级内存存储:', e)
      // 显示用户提示
      showToast('本地存储不可用，部分功能受限')
    },
  }
)

// 隐私模式检测
const checkStorageAvailable = () => {
  try {
    const testKey = '__storage_test__'
    localStorage.setItem(testKey, testKey)
    localStorage.removeItem(testKey)
    return true
  } catch (e) {
    return false
  }
}

const safeLocalStorage = checkStorageAvailable()
  ? useLocalStorage
  : (key: string, init: any) => ref(init)

// 实现标签页间消息广播
const useTabBroadcast = (channel: string) => {
  const message = useLocalStorage(channel, null)
  const postMessage = (data: any) => (message.value = data)
  const clearMessage = () => (message.value = null)
  return { message, postMessage, clearMessage }
}

const useExpirableStorage = (key: string, ttl: number) => {
  const data = useLocalStorage<{ value: any; expires: number }>(key, null)

  const set = (value: any) => {
    data.value = {
      value,
      expires: Date.now() + ttl,
    }
  }

  const get = () => {
    if (!data.value) return null
    if (Date.now() > data.value.expires) {
      data.value = null
      return null
    }
    return data.value.value
  }

  return { get, set }
}

const useStorageQuota = () => {
  const calculateUsage = (storage: Storage) => {
    let total = 0
    for (let i = 0; i < storage.length; i++) {
      const key = storage.key(i)!
      total += (storage.getItem(key)?.length || 0) * 2 // 字节计算
    }
    return total
  }

  return {
    localStorageUsage: () => calculateUsage(localStorage),
    sessionStorageUsage: () => calculateUsage(sessionStorage),
  }
}