useSessionStorage

操作浏览器 sessionStorage 的响应式 Hook，支持自动序列化和类型安全。

前置依赖

依赖参数

参数名	类型	说明
deps.sessionStorage	Storage	sessionStorage 对象
deps.consoleError	Console['error']	错误日志函数

环境要求

• 浏览器环境: 使用 sessionStorage API

const deps = {
  sessionStorage: window.sessionStorage,
  consoleError: console.error
}

函数签名

function useSessionStorage<T>(
  key: string,
  defaultValue: T,
  options?: StorageOptions<T>,
  deps: SessionStorageDeps
): [Ref<T>, (value: T) => void, () => void]

interface StorageOptions<T> {
  prefix?: string
  serializer?: {
    serialize: (value: T) => string
    deserialize: (value: string) => T
  }
}

interface SessionStorageDeps {
  sessionStorage: Storage
  consoleError: Console['error']
}

参数

参数名	类型	必填	默认值	说明
key	string	是	-	存储键名
defaultValue	T	是	-	默认值
options.prefix	string	否	''	键名前缀
options.serializer	object	否	JSON.stringify/parse	自定义序列化器
deps	SessionStorageDeps	是	-	依赖注入对象

返回值

类型	说明
[Ref<T>, (value: T) => void, () => void]	返回元组：[响应式值, 设置函数, 删除函数]

工作原理

与 useLocalStorage 完全相同，唯一区别是使用 sessionStorage 而非 localStorage：

1. 初始化时从 sessionStorage 读取值
2. 设置时写入 sessionStorage
3. 删除时从 sessionStorage 移除
4. 支持自动序列化和反序列化
5. 提供响应式接口

sessionStorage vs localStorage：

• sessionStorage：数据在页面会话期间有效，关闭标签页后清除
• localStorage：数据永久保存，除非手动清除

适用于临时数据存储，如表单草稿、临时筛选条件等。