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

【问题标题】：Why is local storage deleted when I refresh the page?为什么刷新页面时本地存储被删除？
【发布时间】：2021-05-11 11:47:28
【问题描述】：

我在上下文 API 中有一个用于状态管理的 reducer。我正在保存我的 Todos，它正在成功发生，但是当我刷新页面时，所有的 todos 都被删除并且只是保持空数组。

// 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: [],
};

【问题讨论】：

标签： javascript reactjs local-storage

【解决方案1】：

您的代码存在一些问题。

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

接下来，您的保存条件有点倒退。您想检查是否为state.users === null 并为此执行特殊操作，而不是localStorage.getItem("users") === 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

【讨论】：