Can Streamlit keep input variables when refreshing the browser

Using Streamlit
8

I think using st.experimental_set_query_params() and st.experimental_get_query_params() can be another option.

import streamlit as st


def read_values():
    urlparams = st.experimental_get_query_params()
    return {
        "maxDepth": int(urlparams["maxDepth"][0]) if "maxDepth" in urlparams else None,
        "maxBreadth": int(urlparams["maxBreadth"][0]) if "maxBreadth" in urlparams else None,
    }


def save_values():
    st.experimental_set_query_params(
        maxDepth=str(int(st.session_state.maxDepth)),
        maxBreadth=str(int(st.session_state.maxBreadth)),
    )


values = read_values()

st.number_input(label="maxDepth", key="maxDepth", value=values["maxDepth"] or 2, min_value=2, max_value=10, step=1, on_change=save_values)
st.number_input(label="maxBreadth", key="maxBreadth", value=values["maxBreadth"] or 1,  min_value=1, max_value=5, step=1, on_change=save_values)

Note that in this example, setting key to the widgets to access the values via the session state and calling save_values() as the on_change callback of the widgets are an important trick. It does not work well if save_values() is called simply at the bottom of the script. This is due to the execution flow of Stremalit script.

The underlying idea of this example is the same as @Shawn_Pereira 's, but the data store is different; this saves the data to URL params instead of the server storage.

URL params are visible to users, so don’t use this method for sensitive data.

I think saving and restoring data from the local files will encounter problems when the app has to manage multiple users, since the app can’t know the user identity when the user revisits. streamlit-server-state may have the same problem as it shares the data globally without user separation.

If your app is hosted on Streamlit Cloud, st.user can be used to get user identity though :+1:

If not, Cookie extension may help.

I thought the client-side Local Storage could also be a solution like URL query param and found Accessing Local Storage/ Session Storage in custom components. This thread did not reach the solution though, it may be possible with the current Streamlit API?

2 Likes