Question

ReactJS localstorage.getItem 不起作用

2022-06-13

3009

javascript reactjs local-storage

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

刷新页面之前的 localstorage 图片

Answer 1

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

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

因此，它会再次将 contacts 的初始值设置为 localStorage。为了避免这种情况，您可以将 contacts 的初始值设置为从 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

这个问题困扰我好几天了，终于找到了解决办法：

如果从 index.js 文件中删除 StrictMode 元素，问题就解决了，刷新页面时 localStorage 数据会保留下来。最好