ReactJS localstorage.getItem 不起作用

Question

我的 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);}
    }, []);

刷新页面之前本地存储的图片

Answer 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

Answer 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>
  );
};

Answer 3

我几天来一直想知道同样的问题。最后我找到了解决问题的方法：

如果从

StrictMode

文件中删除

index.js

元素，问题将得到解决，刷新页面时

localStorage

数据将保留。 最好

Answer 4

我从index.js中删除了< React.StrictMode >< React.StrictMode />，并在set item的useEffect之前定义了getItem的useEffect，并且它工作正常