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.
Two libraries to help with this:
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?
Apologies, error in the readme file. It should be
from streamlit_session_browser_storage import SessionStorage
I will update the readme file.
The file you are talking about is located in the public directory here.
Correct me if I misunderstood what you were saying.
I received an error that the bootstrap.min.css.map was missing, so I searched for it online and added it to the folder where the library was.
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.
More details in this discussion
@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.
Wait, need to re-work it again.
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.
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.
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.
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.
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.