Access to localStorage

[AndrewValukhov]

Hello! Thanks for you instrument!

In my Streamlit App I need to get access to browser localStorage and get some API token that earlier was used to interact with another application not relative to Streamlit.

Now I just want to look at keys and items in localStorage. I don't have any experience in JS. Is your tool capable of doing it? If yes, wouldn't you mind provide some code snippet?

I'm trying this:

from streamlit_javascript import st_javascript

js_code_2 = """
                    for(let i=0; i<localStorage.length; i++) {
                        let key = localStorage.key(i);
                        alert(`${key}: ${localStorage.getItem(key)}`);
                    }"""

st.subheader("Executing javascript code:")
st.markdown(f"""```
{js_code_2}""")

return_value = st_javascript(js_code_2)
st.markdown(f"Return value was: {return_value}")
print(f"Return value was: {return_value}")

but 'return value was 0'

I would appreciate any advice.

[thunderbug1]

Mhm well I think it is because alert returns null. Can you write your code as a function which returns what you want?

[AndrewValukhov]

Well, I got the exact name of the token, constructed some function, but it still returns null

from streamlit_javascript import st_javascript
js_code = """
                function get_token() {
                  return localStorage.getItem('cpl-client-token');
                }
                console.log(get_token());
                """

st.subheader("Executing javascript code:")
st.markdown(f"""```
{js_code}""")

return_value = st_javascript(js_code)
st.markdown(f"Return value was: {return_value}")
print(f"Return value was: {return_value}")

[thunderbug1]

Try this:

js_code = """
                function get_token() {
                  return localStorage.getItem('cpl-client-token');
                }
                get_token();
                """

st.subheader("Executing javascript code:")
st.markdown(f"""```
{js_code}""")

return_value = st_javascript(js_code)
st.markdown(f"Return value was: {return_value}")
print(f"Return value was: {return_value}")```

[AndrewValukhov]

Thanks, but actually the same result. My colleague suggested that localStorage is a browser object and may be in accessible to the tool.

[thunderbug1]

under the hood it just uses eval on the client side and reads the return value. So if you can write your code in a way where it returns what you want when you open the javascript console and enter: "eval(--your-code-here--)" then that code should also work with streamlit-javascript.

[AndrewValukhov]

Thanks, I realized that fundamental problem that i was testing it locally, but this token is not accessible unless the build in the particular domain. I will test it later then.

But I was able to access localStorage and get some random item. So, your instrument works fine! It's actually not really smart me) Many thanks to you and I'm closing this issue.