streamlit-local-storage 0.0.9

Streamlit component that allows you to do manage local storage

Streamlit local storage

This repo is to help streamlt users manage data in a browser's local storage.

pip install streamlit-local-storage

Important!

# Need to initialise component like this. Unfortunately, cannot call items from local storage on command meaning if say an item in local storage were deleted and you try to call the same key/item it will return the previous value (as though the deleting the key never happened at least in a session). It will only reset when you get a new key/item or create a new session (refresh the browser). Hence need to cache the initialisation of the component because it calls/gets all the items saved in local storage. Then other methods like setItem or getItem are conducted on this class variable and also to the react component so that when a new session is created you can get the saved items and can use the values saved to the class variable in the current session. 

from streamlit_local_storage import LocalStorage

@st.cache_data(experimental_allow_widgets=True) or @st.cache_resource(experimental_allow_widgets=True)
def LocalStorageManager():
    return LocalStorage()
localS = LocalStorageManager()

store an array and individual items to local storage

localStorageArray = [
    {"key":"Games", "toStore":[{"name":"Basically does this work"}]},
    {"key":"Winners", "toStore":[{"name":"Basically does this work Though"}]}
]
localS.setList(localStorageArray)

itemKey = "camera"
itemValue = "Tarah"
localS.setItem(itemKey, itemValue)

get list of items and individual item from local storage

data_ = ["camera", "JamesLook"]
saved_ = localS.getList(data_)

itemKey = "Taylor Swift"
local_storage_item = localS.getItem(itemKey)

get all items saved on local storage

saved_individual = localS.getAll()
st.write(saved_individual)

delete item and item list from local storage

saved_individual = localS.deleteList(["ThomasKing", "Somethingelse"])
localS.deleteItem('Tony')

delete all

localS.deleteAll()

when getting local storage items with streamlit widgets

st.subheader("Method 1")
@st.cache_data(experimental_allow_widgets=True)
def LocalStorageManager():
    return LocalStorage()
localS = LocalStorageManager()

if "get_val" not in st.session_state:
    st.session_state["get_val"] = None

with st.form("get_data"):
    st.text_input("key", key="get_local_storage_v")
    st.form_submit_button("Submit") 

if st.session_state["get_local_storage_v"] != "":
    val_ = localS.getItem(st.session_state["get_local_storage_v"], key="test_get_item")
    st.session_state["get_val"] = val_
st.write(st.session_state["get_val"])

st.subheader("Method 2 - using callback")
@st.cache_data(experimental_allow_widgets=True)
def LocalStorageManager():
    return LocalStorage()
localS = LocalStorageManager()

if "get_val_2" not in st.session_state:
    st.session_state["get_val_2"] = None

if "st_col_test" not in st.session_state:
    st.session_state["st_col_test"] = None 

def change_state_2():

    with st.session_state["st_col_test"][0]: # call method from below form
        localS.getItem(st.session_state["get_local_storage_v_2"], key="test_get_item_2") # initialise/run method and value will be stored in `session_state`
    

with st.form("get_data_2"):
    st.text_input("key", key="get_local_storage_v_2")
    st.form_submit_button("Submit", on_click=change_state_2)
st.session_state["st_col_test"] = st.columns(1) #to make sure rendering happens below form (or other streamlit element. Else the re-rendering of component upon re-running of up will be run at the top of the streamlit component (form here) which creates nasty ui experience.)


if "test_get_item_2" in st.session_state and st.session_state["test_get_item_2"] != None:
    st.session_state["get_val_2"] = st.session_state["test_get_item_2"] # if local storage method is initialised, get the stored value and use it throughout the app.
st.write(st.session_state["get_val_2"])

Remember to refresh browser if it does not pop up instantly in local storage.