指南
Hooks
指南
Hooks

useSessionStorageState

将状态存储在 sessionStorage 中的 Hook，页面刷新后状态依然保持，但关闭标签页后状态会被清除。

基础用法

import { useSessionStorageState } from 'miaoma-rhooks'
import React from 'react'

function Demo() {
    const [message, setMessage] = useSessionStorageState('use-session-storage-state-demo', {
        defaultValue: '你好，世界！'
    })

    return (
        <div>
            <input value={message || ''} onChange={e => setMessage(e.target.value)} placeholder="请输入内容" style={{ width: 300 }} />
            <button onClick={() => setMessage('你好，世界！')}>重置</button>
        </div>
    )
}

API

const [state, setState] = useSessionStorageState<T>(
  key: string,
  options?: {
    defaultValue?: T | (() => T);
    serializer?: (value: T) => string;
    deserializer?: (value: string) => T;
  }
);

Params

参数 说明 类型 默认值
key sessionStorage 的键名 string -
options 配置项 Options<T> -

Options

参数 说明 类型 默认值
defaultValue 默认值，会在 sessionStorage 中没有值的时候使用 T | (() => T) undefined
serializer 自定义序列化方法 (value: T) => string JSON.stringify
deserializer 自定义反序列化方法 (value: string) => T JSON.parse

Result

参数 说明 类型
state 当前状态 T
setState 设置状态的函数 StorageStateResult<T>

进阶用法

表单状态保存

import { useSessionStorageState } from 'miaoma-rhooks'
import React from 'react'

function FormDemo() {
    const [formData, setFormData] = useSessionStorageState('form-draft', {
        defaultValue: {
            name: '',
            email: '',
            message: ''
        }
    })

    const handleChange = e => {
        const { name, value } = e.target
        setFormData({
            ...formData,
            [name]: value
        })
    }

    const handleSubmit = e => {
        e.preventDefault()
        alert(`提交的数据: ${JSON.stringify(formData)}`)
        // 提交后清空表单
        setFormData({
            name: '',
            email: '',
            message: ''
        })
    }

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>姓名:</label>
                <input name="name" value={formData.name} onChange={handleChange} />
            </div>
            <div>
                <label>邮箱:</label>
                <input name="email" type="email" value={formData.email} onChange={handleChange} />
            </div>
            <div>
                <label>留言:</label>
                <textarea name="message" value={formData.message} onChange={handleChange} />
            </div>
            <div>
                <button type="submit">提交</button>
                <button
                    type="button"
                    onClick={() => {
                        setFormData({
                            name: '',
                            email: '',
                            message: ''
                        })
                    }}
                >
                    清空
                </button>
            </div>
            <p>提示: 刷新页面后表单数据会保留，但关闭标签页后数据会被清除</p>
        </form>
    )
}

会话级别的用户设置

import { useSessionStorageState } from 'miaoma-rhooks'
import React from 'react'

function UserPreferences() {
    const [preferences, setPreferences] = useSessionStorageState('user-preferences', {
        defaultValue: {
            fontSize: 16,
            colorMode: 'light',
            showSidebar: true
        }
    })

    const updatePreference = (key, value) => {
        setPreferences({
            ...preferences,
            [key]: value
        })
    }

    return (
        <div>
            <h3>用户设置</h3>
            <div>
                <label>字体大小: </label>
                <select value={preferences.fontSize} onChange={e => updatePreference('fontSize', Number(e.target.value))}>
                    <option value={12}>小</option>
                    <option value={16}>中</option>
                    <option value={20}>大</option>
                </select>
            </div>
            <div>
                <label>颜色模式: </label>
                <select value={preferences.colorMode} onChange={e => updatePreference('colorMode', e.target.value)}>
                    <option value="light">亮色</option>
                    <option value="dark">暗色</option>
                </select>
            </div>
            <div>
                <label>
                    <input
                        type="checkbox"
                        checked={preferences.showSidebar}
                        onChange={e => updatePreference('showSidebar', e.target.checked)}
                    />
                    显示侧边栏
                </label>
            </div>
            <p>当前设置: {JSON.stringify(preferences)}</p>
        </div>
    )
}
ON THIS PAGE