If you are like me, and have been on a journery learning javascript and typescript/react because of streamlit then you may want to combine javascript with streamlit to build javascript components in streamlit via its components.html. Currenlty this does not provide a way to get data into streamlit. Just store it in the browserâs local or session storage and get it in streamlit.
Or you want to store any kind of information in the browser.
Is anyone using that local storage solution? When I do a getItem I get 2 results, always a None, then my string. It looks like it makes two calls or returns two objects. Even in the demo app you can see None flash before the read results are shown.
I also saw that it nested what I wanted in localStorage inside a JSON object. I thought it would just write what I wanted directly.
Hey,
You say: âWhen I do a getItem I get 2 results, always a None, then my string. It looks like it makes two calls or returns two objects. Even in the demo app you can see None flash before the read results are shown.â
response: So this package is utilising use-local-storage-state react package which basically forces component to re-render twice. A simple time.sleep(2) should do the trick but I have implemented it in the update. You can always change the new pause param to None and implement your own in your streamlit app.
You say: âI also saw that it nested what I wanted in localStorage inside a JSON object. I thought it would just write what I wanted directly.â
response: Yes, you are right, it is messy, I have changed this so you get a dictionary of the key and value you saved.
Fair warning, when deleting an item and using the deleteItem function/method, it does not delete but changes the value of the key to null. This makes it so it renders in real time. To remove it from local storage, need to use the eraseItem function/method.
Thanks for the info. Also for the warning about deleteItem. I saw that happening and was wondering why.
Oh, there seems to be a missing file in the GitHub repo. I had to manually install bootstrap.min.css.map to C:\Users\me\miniconda3\envs\openai\Lib\site-packages\streamlit_local_storage\frontend\build.
Hello everyone, Iâm new to streamlit. Iâm just trying to use streamlit session storage. Iâve already install the library pypi, but cant import the library into my project. I use import SessionStorage but turns out there is a warning âModuleNotFoundError: No module named âSessionStorageââ. How to handle this?
Ahh I see, shall rectify in future updates. Though it seems its only relevant when the dev tools are open (so when you wanted to see the storage) explained here and here. It does not seem to be in the original streamlit custom components file but will add in future updates.
I spend a bunch of time solving the problem with asynchronous nature of Streamlit <=> Browser communication and forked the streamlit-javascript library to inform if the js call (e.g. reading/writing localStorage) is finished and you can actually use the value.
@shawngiese I think I sorted out the delay/returning None then sending the actual value. Instead of returning a dictionary, it sends the value you stored. No need to include pause though the parameter is there in case you wish. Give it a try and let me know if it works.
Canât be helped. When loading data from the browser, there will always be a time lag. Plus streamlit has the default parameter so even if we set it to None, it shows None before the component can run and load the data we require. What I changed was to set a time pause when the componentâs class is first mounted/instantiated which will load all the data from the server and save it to session state and subsequent sets and gets will load from session state making it faster. Its the same functionality as other cookie packages that have been created for streamlit.
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking âAccept allâ, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.