I was trying to build a custom component using local-forge for storing client data on client’s browser and then retrieve it when the user revisits the app. It looks like the iframe for custom components is sandboxed and not allowed to access local-storage/indexdb etc. is there any work-around to thi…

Hey @ash2shukla , unfortunately this is not possible for now :confused: there’s a thread on this starting in the middle of this convo : Disqus component (WIP) and a solution involving starting a server on another thread and iframing it back into Streamlit. A more official workaround is in the works …

Hey @ash2shukla - @andfanilo is correct, we don’t currently support this. The issue is that we omit the allow-same-origin sandbox flag on the component iframe for security reasons - and unfortunately, the localStorage API will not work without that flag. As @andfanilo mentioned, we’re evaluating th…

@ash2shukla With Streamlit 0.73 the CORS block measure was lifted, could you try again on your component to see if other problems pop up ? Fanilo

Hey @andfanilo Yep it works ! Checked it last night. I am working on a example to manage state management using client storage. :smiley: Was occupied with some office work will share the results with you guys when its complete. :slight_smile:

I am working on a example to manage state management using client storage Great :smiley: I’d rather contribute to it rather than reimplemeting one XD (it’s in my todo list but my todo list is rather large rn :confounded:)

Wish I could show you my todo list. That would definitely make you feel better. :laughing:

Hi @ash2shukla - just wondering if you have a pointer to your local storage solution? Does it allow for persisting the session from st so it’s available in a component and vice versa, can something stored via the component be available in st? Thanks!

Hi @asehmi , All that the solution requires is a wrapper over localStorage and sessionStorage web apis. Web Storage API - Web APIs | MDN Once you have this component in place you can definitely use it to save state of widgets on client side in session and across sessions. I was supposed to complet…

I’ll give it a go this weekend and very happy to publish the solution if I get it working. Cheers!

I have this working and am writing it up. The app demonstrates bi-directional Streamlit-to-Component communication, integrated authentication with Auth0 IdP which supplies jwt tokens which can be used to call secure API endpoints. The component is written in Next.js so can take advantage of its “ser…

Accessing Local Storage/ Session Storage in custom components

Custom Components

asehmi January 26, 2021, 5:08pm 13

@andfanilo Go get it

Topic		Replies	Views
Browser local and session storage for streamlit Custom Components	12	7362	April 10, 2024
Accessing localstorage through my custom streamlit component Custom Components debugging	1	406	September 11, 2024
Streamlit Next.js Component, Auth0 Authentication, Bi-Directional Messaging & Serverless APIs Custom Components	42	17424	November 2, 2024
Saving data in local storage via streamlit Using Streamlit session-state	22	17548	September 23, 2024
Communicating with a React Component from Streamlit AFTER the component has been created? Custom Components	10	4324	November 19, 2020

Accessing Local Storage/ Session Storage in custom components

Related topics