PricingBlog

Is local storage how I have variables that I can access on multiple pages?

  • rscott-1198475059996655688

    Bishop

    2 years ago

    And how do I see them all/list them?
  • lucasg-1198476519413125151

    Lucas G

    2 years ago

    It depends on the variable. Local storage isn't an inherently safe place to store as the user can access and modify them if they want to so you have to be mindful of what you store here
  • If you need to store things like API keys, then there's no out-of-the-box solution for it yet, though they are working on a way to handle secrets and such
  • lucasg-1198476985085743154

    Lucas G

    2 years ago

    Beyond that, there's a feature called "contexts" which will allow us to 'expose' APIs and formulas to the entire project to be used elsewhere
  • To use local storage though, there's an action that you can use for it
  • rscott-1198511290411397152

    Bishop

    2 years ago

    Feels like the more I use the platform the more I should just not use, and don't really need, multiple pages for the app. Just show and hide sections when you need to, creating more of a one page app. Pages are fine for things that are literally web pages but no reason to break the app into multiple pages.

    This is probably obvious to you old timers
  • rscott-1198512507141226580

    Bishop

    2 years ago

    Maybe the best method for larger apps is to just componetize everything and then hide and show things as needed, overlapping.
  • lucasg-1198512990346039327

    Lucas G

    2 years ago

    You can definitely do that. It can depend on what type of user experience you need to create
  • How you need URLs to behave, how much you want to load on a single page, etc
  • Different things to consider but just building an SPA is always an option
  • rscott-1198516892109918268

    Bishop

    2 years ago

    So the componets would be child nodes and if say someone clicks on an option in a component i would feed that back up to the SPA using context I think
  • Tod-1198516893791825950

    Tod

    2 years ago

    Great energy @Bishop! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
  • gazinhio-1198607348512587776

    gazinhio

    2 years ago

    In terms of showing/hiding sections based on selection or urls eg for SPAs, then using Show/Hide isn't great as it actually removes the element from the DOM completely when hidden and then reloads it completely once shown again. If you're using components, then this resets the state you had in the component (variables) and calls the On Load event again.

    The best way to handle that is to have the Default style's Display property set to None and then use a style class to have a Visible class eg based on whether the url path is set for the element to be shown, and in that class set's it's Display to Flex. This way the On Load of the component is triggered once, when the page is loaded, and not triggered again and the variables are never reset and the component is loaded up-front and simply shown and hidden rather than removed and reloaded.
  • rscott-1198639413853433886

    Bishop

    2 years ago

    i see. So I'm going to load them all, but bind some variable to display property for the component's top div, display flex, so it gets tiny and takes no space and goes invisible. When I need it, set visibility of the bound variable on visibility back to true.. Then variables should not reload, everything accessible.
  • rscott-1198639838052765726

    Bishop

    2 years ago

    I am trying to understand context but when I read this page: https://docs.nordcraft.com I can't find any of the things its talking about. I'm editing a component and when i make formulas or variables, there's nothing about context anywhere despite what this page seems to show.

    I must be missing something obvious but how can i share variables between components?
  • rscott-1198661029467537549

    Bishop

    2 years ago

    I can only find information on using attributes, which is helpful for sure. My question would be if I'm using a component for login, would i pass the token back so the main app has it? That seems like the logical thing to do.
  • 767452073251438612-@Bishop
    I am trying to understand context but when I read this page: https://docs.nordcraft.com I can't find any of the things its talking about. I'm editing a component and when i make formulas or variables, there's nothing about context anywhere despite what this page seems to show.

    I must be missing something obvious but how can i share variables between components?
    lucasg-1198664141901148321

    Lucas G

    2 years ago

    Context feature hasn’t been rolled out yet, it’s close to completion though
  • lucasg-1198664445468098572

    Lucas G

    2 years ago

    On success of the login, use the action “save session cookies” to save the access token
  • lucasg-1198665654321021048

    Lucas G

    2 years ago

    1198665654136492132-image.png
  • an example
  • rscott-1198706693098446999

    Bishop

    2 years ago

    How then to detect on the page if that particular cookie isn't set, show Login component? the only thing I can see is 'Get from session storage' but it wants a particular key. Is it 'Access token'? Does 'access token' expect a key?
    1198706692901318756-Screenshot_2024-01-21_at_1.10.59_PM.png
  • Tod-1198706696546160802

    Tod

    2 years ago

    Great energy @Bishop! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
  • lucasg-1198707549214625922

    Lucas G

    2 years ago

    there's different ways to go about it
  • what backend are you using for the auth functionality?
  • one simple way to do it is to have your header do the check by fetching and verifying the user or user session via API
  • since the header is usually loaded everywhere, it can handle the check
  • otherwise you can just do it on page load
  • lucasg-1198708217644056597

    Lucas G

    2 years ago

    Personally, I use my header component to do the check since I need to pull user metadata for it anyways, so it's like a 2-in-1 for me
  • rscott-1198708264653824241

    Bishop

    2 years ago

    where is header do you mean whatever component i use for 'header', use the onload function?
  • lucasg-1198708281884037263

    Lucas G

    2 years ago

    But you can do it on page load
  • Sorry, by header I meant my app header component
  • Where my navigation is
  • rscott-1198708497722916864

    Bishop

    2 years ago

    k so how i mean do you actually detect the key isn't set, i'm going to post another question that goes into detail about this.
  • lucasg-1198708578370981998

    Lucas G

    2 years ago

    For me, I use supabase for my backend
  • rscott-1198708610281242645

    Bishop

    2 years ago

    xano for me
  • lucasg-1198708680883978260

    Lucas G

    2 years ago

    Supabase has functions you can call to fetch the current user
  • I believe xano is the same
  • That call will fail if a user ins't logged in
  • I set my API to redirect to login on Error