Nextjs：如何以在路线之间导航时不丢失的方式保存简单数据？

Question

我正在尝试在故事路线中获取用户输入的图像，然后将其传递到主路线以显示它，当然用户可以从图像中添加所需的内容，这就是我正在寻找的。 这是相关故事路线代码：

const [fileStory, setFileStory] = useState([]);
  const [selectedFile, setSelectedFile] = useState(null);
  const router = useRouter();

  const handleFile = (event) => {
    setSelectedFile(event.target.files[0]);
  };

const handleAddStory = () => {
    setFileStory((previous) => {
      const newImageList = [...previous, URL.createObjectURL(selectedFile)];
      localStorage.setItem("imageList", JSON.stringify(newImageList));
      router.push('/');
      return newImageList;
    });
    setSelectedFile(null);
  };

这是相关的家乡路线代码：

const [images, setImages] = useState(localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList")) : []);

return (
{images && images.map((imageUrl, index) => (
          <div key={index} className="bg-white rounded-lg h-60 w-36 hover:brightness-95 shadow-md cursor-pointer">
            <div className="bg-gray-400 flex h-3/4 rounded-t-lg">
              <img src={imageUrl} alt="Story" width={200} height={200} className="rounded-t-lg" />
            </div>
          </div>
        ))}
) 

现在让我们来看看我面临的问题，就像我之前说过的，将添加的图像数量不会是一个，所以每次用户进入故事页面时，他都会选择一张新图像，然后我将该图像添加到 fileStory 变量“与以前的图像”中，这样当用户尝试添加新图像时，以前添加的图像不会丢失，然后当返回主页时，它将显示以前添加的图像和新图像图像添加到其中，但不幸的是，这种情况没有发生，当尝试添加新图像时，它只显示新图像而不显示前一个图像，所以我丢失了以前的图像数据，我不知道为什么会发生这种情况。

Answer 1

可以使用浏览器localStorage来存储之前的页面状态，然后使用useEffect从localStorage中获取数据来保存用户输入