为什么刷新页面时本地存储被删除了？

Question

我在上下文 API 中有一个用于状态管理的减速器。我正在保存我的待办事项并且它正在成功发生但是当我刷新页面时所有待办事项都被删除并且只保留空数组。

// The relevant part in the reducer.
case "TODO_ADD_USER":
      return {
        ...state,
        users: action.payload,
      };

// Localstorage functions.
useEffect(() => {
    saveLocalTodos();
  }, [state]);

  useEffect(() => {
    const localTodos = getLocalTodos();
    dispatch({ type: "TODO_ADD_USER", payload: localTodos });
  }, []);

  const saveLocalTodos = () => {
    if (localStorage.getItem("users") === null) {
      localStorage.setItem("users", JSON.stringify([]));
    } else {
      localStorage.setItem("users", JSON.stringify(state.users));
    }
  };

  const getLocalTodos = () => {
    let locals;
    if (localStorage.getItem("users") === null) {
      locals = [];
    } else {
      locals = JSON.parse(localStorage.getItem("users"));
    }
    return locals;
  };

Place of keeping the state.
const users = {
  users: [],
};

Answer 1

您的代码有几个问题。

这里最重要的是你在获取待办事项之前先保存它们。所以在应用程序开始时，事情正在重置，这是有问题的。

接下来，您的储蓄条件有点倒退。您想检查是否 state.users === null 并为此执行特殊操作，而不是 if localStorage.getItem("users") === null，因为默认情况下它将为 null，并且与内存中的值无关。

事实上，如果 localStorage 值不为 null，而 state.users 为 null，那么它会将 "null" 设置为 localStorage，这不太理想。

这是工作代码：

  useEffect(() => {
    // Get the item from local storage. JSON.parse(null) returns null rather than throws
    // Get from local storage before setting it
    const localTodos = JSON.parse(localStorage.getItem("users")) || [];
    dispatch({ type: "TODO_ADD_USER", payload: localTodos });
  }, []);

  useEffect(() => {
    // The conditions for this was wrong.
    // You want to check if `state.users` has a value
    // If it does, store! If not, don't store.
    // That way you don't reset data
    // In the case that you have this app running in two windows,
    // there's more that needs to be done for that.
    if (state.users) {
      localStorage.setItem("users", JSON.stringify(state.users || []));
    }
  }, [state]);

https://codesandbox.io/s/angry-glitter-9l10t?file=/src/App.js

为什么刷新页面时本地存储被删除了？

Why is local storage deleted when I refresh the page?

javascript

local-storage

reactjs