Repopulating Form on Reload

[HawkDev]

I have an online form, which has various dropdown lists. One of these is for names of clients, one is for the location, one is for time of appointment, etc. It also has a function to add items onto the dropdown lists if it is a new client. This means that the page has to be reloaded to repopulate the dropdown list with the new client name.

However, there are a lot of different dropdown lists on the form, and if the page is reloaded, I want the particular selections that the user has already made to be reloaded when the page is reloaded, so that they do not have to start again just because one dropdown list needed to be edited.

Can you please explain how to do this? Thank you.

[justsomeguy]

Do you want to do all of that in Javascript?  If so, put a handler on each dropdown that runs when the value is changed, and save the new value.  When the page is loaded check for that saved data and set the values of each field.

[HawkDev]

Thank you. I understand that I can use an event handler like ‘onchange’. That is not difficult. However, what I am struggling with is how to save the data between the change of choice in the drop down menu, and the reload of the page. 

[justsomeguy]

It's probably best to use localStorage, but you could also use cookies as a data store.

[HawkDev]

I tried using local storage, but I can’t seem to get the system to store the data, and then recall it on reload. Can you please give me a clear example of how this would work for multiple variables?

[HawkDev]

It is ok. I have managed to test a scenario using sessionStorage, and get the data to be recalled after a page refresh. I will now try to apply this to my situation. 

[justsomeguy]

localStorage is just like sessionStorage, but sessionStorage only lasts while they're on your site, it won't be there if they come back.  localStorage will.  It's exactly the same to use it though, the difference is persistence.