Angular persist data between steps

I have an angular multi step form(6 or 7 steps) where the user will be able to fill the form once they login.
The User may fill a couple of steps and logout/close browser and come back later
When the user logs back in later on the same or different device, he should be able to continue the form rather than starting from step 1.
whether user is filling the new form or came back to fill the remaining form, on clicking the back button, data of the previous step should be persisted

All the steps information of the form should be stored in aws dynamodb item(single item with all steps information) with a composite key (may be user id and created date).

How can we persist the data between steps? how to store data in memory so data can be persisted?
how to save the form at every step of angular multi step form? Is it really necessary to store data to database at every step?

Hey there. Just a foreword, without really knowing the architecture of your project, I can’t give the most definite answer, but hopefully we can get started in a general direction…

First of all, storing data in DynamoDB every time the user leaves a session is an option, but probably isn’t the best one (well… it’s DynamoDB so maybe it’s not so bad… but regardless), as you’ve noted, so let’s look at alternatives.

You mentioned two use cases here: Storing form data inbetween sessions on the same device, and storing form data across multiple devices. I’m choosing to distinguish them here because they may require two approaches.

The simpler way, assuming you’re building a browser app (you’re using Angular, so I’ll assume you are) handles only on-device persistence: you can use window.localStorage. localStorage is essentially memory that is persisted by the user’s browser until the user, or you, decide to clear it. Every localStorage instance for any browser is specific to the origin of the page by which it was generated, so you don’t have to worry about other random apps having access to or overwriting your data.

You should be able to do something like window.localStorage.set('form_data', <your_form_data>) or something similar to persist form data for that user, and you can refer back to it at some point later. However since localStorage is specific to a single device, you will not be able to share session data between devices.

Another way that may allow you to share data between devices is by maintaining server sessions. This means that your app will need a server-side backend in some form. The gist of how this works is that you enable your Angular app to POST data to your backend with some way to identify whose data it is–common patterns are by use of tokens. What I’m about to explain is greatly oversimplified so I’d encourage you to do your own research, but the basic session flow is:

  1. Browser requests a session from the server by passing some credentials which identify the user (This can be whatever you want, commonly it’s something secure like user_id/password, secret_key, etc.)

  2. The server validates those credentials and starts a session, returning a token. The token is the “key” that lets the server know who the user is.

  3. It is common for the server to set an expiration time for these sessions, as in, your session token is only valid for 1 hour. During that hour, the server can maintain all of the data that has been passed back and forth between the browser and itself. After that hour, the server clears that data, and it invalidates the token that it issued.

That turned out to be a longer answer than I would have liked. I hope I was clear enough. Hope this helps you.

(E: I said cookies before. Cookies aren’t the best way to do this, so I removed them from here.)

Thank you very much for your reply. Really appreciate it.

I did a bit of research with your guidance and came up with the following thoughts.

Identify the browser close/tab close/session timeout/logout event and save all the information user has filled in(partial/complete)to the database. That way, if the user closes a browser after partially filling a form on a device and comes back to complete the rest of the form on a different device, I would then make an api call to dynamodb and get the information and fill in the pages the user has already completed. Saving to the database at every step might not be a good idea I think.

With regards to the back button to persist the data user has already filled in, probably better to use a service I think, inject in every component and restore from that shared service when the user clicks the back button. If the user logs in through a public internet cafe, localstorage would persist in the browser and that might be a security breach. But downside with the service is I have to save every page information as I go along the steps.

Please reply with your thoughts. Really appreciate your time.

Glad you found a few ideas!

Pardon me for being hand-wavey, but why don’t you tinker around with those approaches and see what works best? It sounds like you know the direction you want your project to go in, so I’d try everything and find out what works and what doesn’t. That’s a better way to find out the best approach for you rather than me just telling you :slightly_smiling_face: