ReactJS localstorage.getItem 不工作

Question

我的 localstorage.getItem 有問題，setItem function 工作正常並且數據存儲正確，但是當我刷新頁面時數據消失了。 這是我的代碼

  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

幾天來我一直在想同樣的問題。 終於找到了解決問題的辦法：如果把index.js文件中的StrictMode元素去掉，問題就解決了，刷新頁面時localStorage的數據會持續存在。 最好的