如何在 Next.js 的 sessionStorage 中存储状态

Question

我正在 Next.js 中创建一个应用程序，人们可以在其中设置他们的年龄、性别以及他们是否怀孕，以便将与健康相关的信息发回给他们。我想将他们输入的值存储到会话存储中，并在多个不同的页面中使用该状态。我遇到的问题是在页面重新加载时，会话存储中的值被重置回默认状态。

import { useEffect, useState } from "react";

export function humanStuff() {
    const [human, setHuman] = useState({ sex: 'Male', age: '19-50 years', pregnant: 'No' });

    useEffect(() => {
        const storedState = sessionStorage.getItem('human');
        if (storedState) {
            setHuman(JSON.parse(storedState));
        }
    }, []);

    const handleChange = e => {
        const { name, value } = e.target;
        setHuman(prevHuman => ({ ...prevHuman, [name]: value }));
    };

    );
    useEffect(() => {
        sessionStorage.setItem('human', JSON.stringify(human));
    }, [human]);

    return { human, handleChange, setHuman };
}

我导入它并这样称呼它：

const { human, handleChange, setHuman } = humanStuff()

除了会话存储中的值在重新加载时重置为默认值外，目前一切正常。我在想如果会话存储存在，我需要一些方法来设置对会话存储的原始 useState 调用，但我找不到任何方法来做到这一点，因为需要 useEffect 才能进行会话存储。