如何在页面重新加载事件后持久化 React 组件？

Question

这更像是一个假设性问题，因为我想在尝试为此问题编写代码之前有一个清晰的想法。

例如，假设我有 Board（父）和 Card（子）组件。

Cards 被放置在 Board 内并且在内部包含一些文本元素（可能是待办事项）并且可以在板内和板之间移动。因此，状态用于允许用户将卡片从一个面板移动到另一个面板，然后“勾选”待办事项，而不是将所有内容重置为原始位置。

但是如果我想在用户重新加载页面后继续存在会怎样？

我唯一的选择是在“字符串化”之后将所有内容存储在 localStorage 中，还是有其他（更好的）替代方案？

我在网上看到很多关于单个组件的示例，您可以在其中简单地存储该组件的状态和文本，但是当涉及到带有子组件的组件时，这似乎非常低效和复杂。

Answer 1

通常的方法是使用localStorage。 localStorage 工作原理的完整示例，您可以自己更改状态。

const LOCAL_STORAGE_KEY = 'todosvar'

useEffect(() => { 
const storedTodos = JSON.parse(localStorage.getItem
(LOCAL_STORAGE_KEY))
if (storedTodos) setTodos(storedTodos)
}, [])

useEffect(() => { 
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todosvar))
 }, [todosvar])

如何在页面重新加载事件后持久化 React 组件？

How to Persist React Components with Children after Page Reload Events?

javascript

reactjs

persistence