Storing rendered components and state: how to persist across page reloads?

Question

I'm developing a dashboard application that users can customize to render components of their choice. Once they are configured, how do I save this state so that when the user revisits the application, it loads the same settings as when they left?

For example, I have the following components available: A, B, C, D, E. Users configure their dashboards to only render A, C, D. I want the same components (A, C, D) and their respective states to be rendered when the user reloads or revisits the page. I don't want the user to have to reconfigure the application every time.

I considered storing the data in a text file, but I'm not sure how to convert that data back to the component. Any suggestions?

Answer 1

If you're talking about saving data in the browser, you have some options:

• Local Storage
• Indexed DB
• Cookie

Client Storage

For React, you can also find things like useLocalStorage (similar to useState), which for example simplifies the above usage. Still, a pure browser API might be simple enough.

But, realistically, the solution may depend on how you define (identify) your "user". Is he the one who opened the browser? Or a logged in person in your app?