重新加载页面后，本地存储不保留数据。 （反应打字稿）

Question

大家好，有人可以帮我解决这个问题吗？

我尝试将数据存储在 localStorage 中。 一切正常，直到我重新加载页面。 页面重新加载后，localStorage 为 null。

function getValues(){
    const storedValues = localStorage.getItem('SET')
    if(!storedValues) return 'nothing';
    return JSON.parse(storedValues)

}

const [fruit,setFruit] = useState(getValues)


useEffect(()=>{
    localStorage.setItem('SET', JSON.stringify(fruit))
},[fruit])

return (
<>
        FRUIT: {fruit}
        <button onClick={() =>setFruit('APPLE')}>APPLE</button>
        <button onClick={() =>setFruit('BANANA')}>BANANA</button>
</>

在我重新加载页面后，output 是：“没有”。 有谁知道如何解决这个问题？

Answer 1

好吧，我不太熟悉 React，但本地存储不只是擦除自身。 我认为您的代码中的问题来自“ getValues ”function。

    function getValues(){
        const storedValues = localStorage.getItem('SET')
        if(!storedValues) return 'nothing';
        return JSON.parse(storedValues)
    }

你有一个回报'什么'; 这可能就是它返回“无”的原因。 您可以使用以下方法轻松地将内容保存到本地存储中

function saveValue(name, value) {
    let v = JSON.stringify(value);
    if (localStorage.getItem(name)) {
        alert('Item already exists');
    } else {
        localStorage.setItem(name, v);
        console.log(`${name} added successfully`);
    }

function getValue(name) {
    let jsonValue = localStorage.getItem(name);
    let value = JSON.parse(jsonValue);
    return value;
}

并且您可以使用这两个函数从 localStorage 添加和获取任何您喜欢的值。 请注意，名称参数必须是字符串。 我希望这在某种程度上有所帮助