鍵值對出現在 LocalStorage 中，但盡管有 JSON stringify/setItem/etc 刷新后仍不存在

Question

我構建了一個 Todo 應用程序，它運行順利，除了 localStorage 不會在刷新后持續存在的事實。 當我的事件處理程序較少時，localStorage 命令以前可以工作，但現在似乎在某個地方，存儲被擦除了。 我已經嘗試了我在這里看到的基本解決方案，但似乎有一些獨特的東西會導致錯誤。 這是我的保存/獲取功能：

節省：

const saveLocalTodos = () => {
  localStorage.setItem("todos", JSON.stringify(todos));
};

得到：

const getLocalTodos = () => {
  if (localStorage.getItem("todos") === null) {
    localStorage.setItem("todos", JSON.stringify(todos));
  } else {
    let localTodo = JSON.parse(
      localStorage.getItem("todos", JSON.stringify(todos))
    );
    setTodos(localTodo);
  }
};

有效地，該過程通過將“todos”項設置為字符串化數組 todos（當添加新的 todo/完成狀態更改/項目已加星標/等時工作並顯示在本地存儲中）來保存。 useState 函數如下：

useEffect(() => {
  filteredTodosHandler();
  saveLocalTodos();
}, [todos, status, starredToggle]);

所以就像我說的，在 todos 數組更改、可點擊狀態過濾器更改或已加星標的復選框被點擊時調用。 這些都不會破壞 localStorage。 現在這里是 getLocalTodos 的 useEffect：

useEffect(() => {
  getLocalTodos();
}, []);

如果我理解正確，一個空數組大致意味着它在頁面刷新時被調用。 問題是當我刷新時，我總是得到一個空數組。 我試過添加“窗口”。 在 localStorage 函數調用開始時，將 e.preventDefault 添加到 saveLocalTodos 案例中涉及的事件處理程序中，並確保我將數組轉換為字符串化對象。 似乎沒有任何效果。 我在 GitHub 存儲庫中有一份應用程序副本，並通過 Firebase 托管，如果這會增加額外的洞察力。

Answer 1

你是這樣定義待辦事項的嗎？

const [todos, setTodos] = useState([]);

並且加載塊

useEffect(() => {
  getLocalTodos();
}, []);

在保存塊之后去

useEffect(() => {
  filteredTodosHandler();
  saveLocalTodos();
}, [todos, status, starredToggle]);

在你的代碼中？

如果是，則保存效果saveLocalTodos(); 將在加載效果getLocalTodos()之前調用，當頁面重新加載時，它將保存 useState([]) 中 [] 的默認值； 到本地存儲，然后由加載效果加載。 這樣就有可能被消滅。

為了測試它，嘗試切換useEffect塊的順序。 還要添加一些日志記錄來檢查這些塊的運行順序。

如果useEffect ，您仍然應該更改設計，如果useEffect的聲明useEffect很重要，那真的很糟糕，有人（甚至您）可能會在以后更改它並重新引入問題。