如何在用户重新加载页面时存储渲染的组件和状态?

huangapple go评论61阅读模式
英文:

How do I store rendered components and state when a user reloads the page?

问题

我正在开发一个仪表板应用程序,用户可以自定义它以渲染他们选择的组件。一旦他们配置好,我该如何保存这个状态,以便用户重新访问应用程序时加载与他们离开时相同的设置?

例如,我有以下可用的组件:A,B,C,D,E。用户配置他们的仪表板只渲染A,C,D。我希望使用户重新加载或重新访问页面时,渲染相同的组件(A,C,D)及其相应的状态。我不希望用户每次都必须重新配置应用程序。

我考虑将数据存储在文本文件中,但我不确定如何将该数据转换回组件。有什么建议吗?

英文:

I am working on a dashboard app where the user can customize it to render their choice of components. Once they configure it, how can I save this state so that if the user revisits the app, it loads the same setup as when they left?

For example I have the following components available: A, B, C, D, E. The user configures their dashboard to render only A, C, D. I want to make it so when the user reloads or revisits the page, the same components (A, C, D) and their respective state are rendered. I don't want it so the user has to reconfigure the app each time.

I was thinking of storing the data in a text file but then I'm unsure how to convert that data back into a component. Any advice?

答案1

得分: 1

如果你在谈论在浏览器中保存数据,你有一些选项可供选择:

  • 本地存储
  • Indexed DB
  • Cookies

客户端存储

对于React,你还可以找到类似于useLocalStorage(类似于useState)的东西,它简化了上述选项的使用。不过,纯粹的浏览器API可能已经足够简单了。

但实际上,解决方案可能取决于你如何定义(识别)你的"用户"。是指打开浏览器的人吗?还是你应用程序中已登录的人?

英文:

If you are talking about saving data in a browser, you have some options to pick from:

  • Local storage
  • Indexed DB
  • Cookies

Client-side storage

For react, you can also find stuff like useLocalStorage (like useState) for example that simplify usage of the above. Plain browser API may be already trivial enough, though.

But, actually, the solution may depend on how you define (identify) your "user". Is it a person who opened the browser? Or maybe a person who is logged in your application?

huangapple
  • 本文由 发表于 2023年2月10日 10:36:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/75406417.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定