Question

我正在使用React js构建一个Webapp，允许用户添加文本，更改文本，添加图像，更改文本以及上传自己的图像。

如果他们关闭标签或转到其他页面，我希望能够在离开页面时重新加载页面。我知道我可以使用localStorage进行存储，但是当他们返回该页面时，我很难渲染它们。如何将localStorage注入到主体中以使其呈现该会话？

我正在使用MERN堆栈来处理用户数据。但是在这种情况下，我不一定要存储页面的JSON字符串表示形式。我只想将其保留在浏览器的本地存储中，并以用户离开之前的方式呈现元素（位置，尺寸等）。

Answer 1

如果您希望Web应用程序显示用户数据，则需要使用某种数据库。 MySQL和PostgreSQL是出色的SQL数据库。如果您从未接触过SQL数据库，那么MySQL可以很好地开始。如果您不想使用SQL数据库，则可以使用NoSQL数据库，该数据库使用.json文件表示您的数据。有一些工具可以帮助您管理诸如mongoDB之类的.json数据文件。请注意，如果您打算扩展此应用程序，那么真正的大型SQL数据库会更好，而NoSQL数据库更适合于原型设计。

此外，您将需要托管服务器来下载这些数据库并将您的内容提供给公共网站。那里有许多云托管提供商，例如Amazon Web服务，Microsoft Azure，Google Cloud，Digital Ocean和Linode，列举了一些更受欢迎的提供商。

Answer 2

也许是这样吗？

localState.js

acc_no=104

index.js

export const clearState = () => {
  localStorage.removeItem('state');
}

export const loadState = () => {
  try {
    const state = localStorage.getItem('state');
    if (state === null) {
      return {};
    }

    return JSON.parse(state)
  } catch (err) {
    console.warn('%c load state error', 'color: #b00', err);
  }
};

export const saveState = (state) => {
  try {
    localStorage.setItem('state', JSON.stringify(state));
  } catch (err) {
    console.warn('%c save state error', 'color: #b00', err);
  }
};

一个警告是，如果您曾经更改过模式，那么您将想要删除已保存的状态以避免奇怪的错误。或者，您可以使用架构版本控制。

如何使用React呈现用户的上一个会话？

2 个答案: