ReactJS localstorage.getItem 不工作答案

【问题标题】：ReactJS localstorage.getItem is not workingReactJS localstorage.getItem 不工作
【发布时间】：2022-08-07 19:18:46
【问题描述】：

我的 localstorage.getItem 有问题，setItem 函数工作正常并且数据存储正确，但是当我刷新页面时数据消失了。这是我的代码

  useEffect(()=>{
localStorage.setItem(local_Storage_key, JSON.stringify(contacts));
}, [contacts]);

 useEffect(()=>{
    const storage = JSON.parse(localStorage.getItem(local_Storage_key));
    if (storage) {setContacts(storage);}
    }, []);

picture of the localstorage before i refresh the page

你在隐身模式吗？

标签： javascript reactjs local-storage

【解决方案1】：

我认为这是因为您的以下代码是在安装组件后执行的。

useEffect(()=>{
    localStorage.setItem(local_Storage_key, JSON.stringify(contacts));
}, [contacts]);

正因为如此，它再次将联系人的初始值设置到 localStorage 中。为避免这种情况，您可以将联系人的初始值设置为您从 localStorage 获得的值

const [contacts,setContacts] = useState(JSON.parse(localStorage.getItem(local_Storage_key)));

useEffect(()=>{
    localStorage.setItem(local_Storage_key, JSON.stringify(contacts));
}, [contacts]);

// remove another useEffect

【讨论】：

谢谢兄弟，您的回答给了我错误，但它引导我通过在设置本地存储之前检查联系人状态是否为空来解决问题。 if (contacts.length !== 0) localStorage.setItem(local_Storage_key,

【解决方案2】：

我建议你使用useLocalStorage

import { useLocalStorage } from 'react-use';

const Demo = () => {
  const [value, setValue, remove] = useLocalStorage('my-key', 'foo');

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue('bar')}>bar</button>
      <button onClick={() => setValue('baz')}>baz</button>
      <button onClick={() => remove()}>Remove</button>
    </div>
  );
};

【讨论】：

【解决方案3】：

几天来我一直在想同样的问题。最后我找到了解决问题的方法：如果您删除严格模式元素来自index.js文件，问题将得到解决，并且本地存储刷新页面时数据将保持不变。最好的

【讨论】：