Multipage app data persistence: restoring list data from local storage data on load

💬 App Building
1

ISSUE RESOLVED

  1. My goal: To enable data persistence via localStorage in a multipage app
  2. Issue: List component instance values seem to have no way of re-triggering their default state, but they load before the process of restoring localStorage data to a gbl_data_structure can complete and this is where the list segmentControl default values come from
  3. Steps I've taken to troubleshoot: At this point I've gone round and round in circles and I'm not even sure what I've tried any more or if this is even possible - pls send help
  4. Additional info: (Cloud or Self-hosted, Screenshots) Using Cloud. Am relatively new to Retool and developer work
3

Hi @mandyc - what is the data source for the List component? For instance, are you pointing the list component to a transformer that references localStorage? Is that what gbl_data_structure is? If you could share a little more of your setup, that might help others troubleshoot.

4

Thanks for the update, @mandyc. If you're able to provide any more details about the fix, it might end up being useful to others in the community!

1 Like
5

SOLUTION:
I solved for this with an 'on page load' query, async / await functions to sync the data variable values with the localStorage data, and setting a page load delay of 3000ms to allow for the variables and page components to initialise. Though, the 3 second delay makes for a clunky UX - so I've had to add in a 'loading' overlay to prevent users interacting with the form inputs before data is loaded in (which would otherwise overwrite any new response at this point)

1 Like