Struggling with Saving and Retrieving Selected Rows in Local Storage

Hello Retool community!

I've been facing an issue related to saving my selected table rows to the local storage and then automatically selecting them again when the page reloads. I could really use some help in figuring this out!

I'm working on a web application that requires users to select specific rows from 3 different tables. I want to store these selections in the local storage so that when the user revisits the page, their prior selections are already marked for them.

I believe there's a disconnect between saving the selections and retrieving them to set as default selected rows upon page load. I'm not sure if it's a syntactical error, a conceptual oversight, or maybe I'm missing some critical Retool functionality.

Has anyone else faced this issue or something similar? How did you manage to save and then retrieve table row selections using local storage in Retool? Any guidance, examples, or references would be greatly appreciated!

Thank you in advance!

Welcome to the forum!
Are you saving the actual data or just the selectedRow Index?
Screenshots?

Hi there ScottR!

I'm trying to save the selectedRows indices, but these indices aren't in the data that drives the tables.

The code that stores the selectedRows in the localstorage:

The localstorage results:
Screen Shot 2023-08-10 at 16.09.51

I also can't reference to the local storage since it only stores strings, right?

What should I do? Change the code in the queries that drive my tables so that I do have indices of the rows? And by the way, I'm not an experienced code writer at all. All code is written by ChatGPT :sweat_smile:

Also, maybe it's smarter to save the actual data instead of the indices of my rows. But I'm trying to reselect the rows that were selected in a previous session so I thought saving the indices of the rows was quicker.

oh boy chatGPT!
OK well once you retrieve the local storage values like:
_.get(localStorage.values,'BrandDNABV...') using ... here just to be brief but fill out the full name of each.
In each table you set the default selected row to be the value in [ ] (but you may need to parse it.
You also will need to turn on multirow selection for each of the tables

The only issue I see here is that saving the rows in localStorage with indices is that if the table data changes and is sorted automatically the indices will then be off

Thanks for the tips!
So I finally managed to put the right indices in the localstorage. But since they are still strings, I can't reference to them although they look like indices.
Screen Shot 2023-08-10 at 17.29.00

And when I try to parse them so they become arrays of indices again so I can use them as default row indices, I get an error that says:

  • message:"Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag."

Any idea how I solve this?

Are you trying to read the localStorage in the same app or from a different window/iFrame? If you can store the values as '0,2,4' that may help because you can take that value and stuff it into an array when getting it back

I'm trying to read the localStorage in the same app. But I don't know how to convert them to an array. It seems like accessing localStorage with queries in the same app is not possible in Retool.

I saw the following post addressing the same issue: Can't access localStorage from global functions

Any solutions?

After you run whatever happens before the table loads again you can set a success event handler like so for that table:


So you dont need to convert to array, get your local storage values and then add
[{{yourlocalstoragevaluescommaseparated}}]

1 Like

:wave: It looks like you can also store objects in localstorage without the need to stringify:

and then set selected rows with a Javascript query that runs on pageload

Hey!
Thanks a bunch for the suggestion.

However, even with local storage, I still found myself wrestling with retrieving indices and toggling default rows whenever a select component underwent changes. So, at the end of the day, I opted for storing the indices of the selected rows in variables and afterwards in a Google Sheets document.

Google Sheets offers a far more flexible playground for data manipulation than local storage does.

Once again, major thanks for the assist!