next.js 刷新后localStorage为空

6l7fqoea 于 2023-04-05 发布在其他

关注(0)|答案(2)|浏览(196)

我需要在nextjs中使用localStorage，但刷新后我丢失了所有数据（控制台中的空数组[]）。

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

  useEffect(() => {
    const storedTodos = JSON.parse(localStorage.getItem('todos')) || [];
    setTodos(storedTodos);
  }, []);

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

在React中：

const [todos, setTodos] = useState(
    () => JSON.parse(localStorage.getItem('todos')) || []
  );

但是在nextjs中我看到localstorage is not defined。
谢谢你！

next.js

来源：https://stackoverflow.com/questions/75892359/localstorage-empty-after-refresh

2条答案

按热度按时间

aurhwmvo1#

只尝试localStorage.setItem('todos', "test");而不使用useEffect，并检查您的浏览器是否已将其保存在本地存储中。
请确保你是在一个类/函数组件中设置的。
localstorage

赞(0）回复(0）举报 2023-04-05

k10s72fa2#

useEffect每次刷新都重置localStorage，所以我添加了todos.length === 0来检查：

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

  if (typeof window !== 'undefined') {
    if ((localStorage.getItem('todos')) === null) {
      localStorage.setItem('todos', JSON.stringify([])); // initialize here to prevent the null pointer in useeffect (todos.length)
    }
  }

  useEffect(() => {
    const storedTodos = JSON.parse(localStorage.getItem('todos'));
    setTodos(storedTodos);
  }, []);

  useEffect(() => {
    
    if (todos.length === 0) {
      console.log("Array is empty!")
    } else {
      localStorage.setItem('todos', JSON.stringify(todos));
    }
  }, [todos]);

赞(0）回复(0）举报 2023-04-05

我来回答

next.js 刷新后localStorage为空

2条答案

相关问题

热门标签

最新问答