Custom Component and local storage

App Building
1

I'm having problems using local storage from inside a custom component. In some places trying to use localStorage.setValue() or localStorage.values will throw some kind of error and without checking the browser dev window for errors, the only way to know this is by visually seeing the component stop rendering (it goes blank). oddly enough, this only happens in certain places. other times the component will actually render, it's not until interacting with it the browser shows errors. the linter never catches this btw (i'm not sure it catches most if any errors in custom components honestly)

const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => {
  localStorage.setValue("myvar", "test");  // this line prevents rendering

  return(
    <div>
    <button id="connect-button" type="button"
          onClick={() => {
            let testvar = localStorage.values.myvar;  // this does not prevent rendering but will error out
          }}
    >my button</button>
    </div>
  );

I'm guessing custom components don't have access to local storage, but there is that interaction property Storage and Cookies (which I do have checked) so it seems like it should have access. Am I just not accessing it correctly or is it always going to error unless it's added to, or used from, a webapp?

2

Hi @bobthebear

Instead of localStorage.setValue you need to use localStorage.setItem.

Hope this help

2 Likes
3

wow thankyou so much. I think the docs need a bit of an update:

I probably broke something, but it seems the intellisense (auto suggestion? idk, i'm a VS Code person lol) in Custom Components doesn't work or isn't enabled and with that part of the docs outdated I was about to lose my mind :frowning_face:. what'd you use to figure this out? or was it luck/trial and error?

4

Happy that works.

I tested your code and indeed it breaks the rendering, so I checked the reference of localStorage from MDN.

Be aware that localStorage you're referring to is a Retool internal one, so its doc is not outdated. They used a slightly different API than the Web one, though.

5

wait, now I'm really confused. sorry, I'm not a web/front-end guy, but are you saying there are 2 localStorage objects? one browser (via window) and one retool?

if so, the links are from Retool and they show using localStorage.setValue() or setValue("localStorage", obj).... but you checked MDN to confirm that code breaks the rendering? wouldn't that mean these 2 ways would be using the browser localStorage and not the Retool one?

i guess i'm just confused which one i'm currently using (with localStorage.setItem).... while I'm at it, I'm trying to figure out why one location breaks rendering and the other doesn't. My only guess is that when it breaks I'm seeing the initial re-draw after 'saving' the code (hot reload?), the other spot (in the onClick event) isn't seen by the browser until the event is actually triggered because of how React/JS work (like I'd expect a compile time error or linter not runtime, but ya thats probly my c++ bias)?

6

Oh yes, they are two distinct sandboxed localStorage:

  • the Retool one, that you can manipulate within Retool components using the reference provided by Retool, that lives within your Retool Org domain (i.e. yourorg.retool.com).
  • the standard web localStorage, that you can manipulate within any Custom Components using the reference provided by the Web standards, that lives within the retool-edge.com domain that is reserved for custom components.

Hope this make more clear.