Preserving Page State in Streamlit App with Multiple Pages

[Anandhu_H]

Summary

I have created a Streamlit app for PDF information extraction. It has 7 pages (7 py files saved in /pages folder). The issue is that on switching between pages from the sidebar, the progress in the previous page is lost.

Steps to reproduce

You can find this by checking this app from the Streamlit App Gallery

1. Zoom into the map in the draw support page
2. Select any other page
3. Return back to the draw support page

Expected behavior:

The map is still zoomed in

Actual behavior:

Progress/operations (here zooming into the map) done in the page is gone. The page is refreshed.

Debug info

• Streamlit version: 1.22.0
• Python version: 3.9

Additional information

One solution is changing from multiple pages to multiple tabs in a single page (st.tabs). Since there is a lot going on each page, converting them to tabs caused delay in loading.

How can I preserve the state of the pages?

[dataprofessor]

Hi @Anandhu_H

Typically, a Streamlit app runs from top to bottom and upon widget interaction the app state is reset. Thus, upon changing the page, the previous widget state would be reset.

To address that, you can look into using session state. Please see the following Docs page to get started:

Session State - Streamlit Docs

Add statefulness to apps - Streamlit Docs

Also, the following forum post seems to be relevant:

Multi-page apps with widget state preservation. The simple way

@okld I have beent thinking about your remark: Unfortunately this will cause an error if you assign a key to a button, download_button, file_uploader or a form. In which case would you need a key for a button? Can’t a callback function (on_click = …) work as an equivalent? I can’t think of a case where you would want to store the state of a button in session_state.

Hope this helps!