Browser local and session storage for streamlit

[Rushmore]

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:

• local storage pypi github demo
• session storage pypi github demo - similar to the local storage above.

[shawngiese]

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.

[Rushmore]

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.

[shawngiese]

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.

[latifa]

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?

[Rushmore]

Apologies, error in the readme file. It should be

from streamlit_session_browser_storage import SessionStorage

I will update the readme file.

[Rushmore]

The file you are talking about is located in the public directory here.

Correct me if I misunderstood what you were saying.

[shawngiese]

@shawngiese

bootstrap.min.css.map

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.

[Rushmore]

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.

[toolittlecakes]

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

[Rushmore]

@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.

[Rushmore]

Wait, need to re-work it again.

[Rushmore]

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.