sessionStorage not working on firefox

Dash Python
1

Hello, as the title says, my session storage doesnt work on firefox browser.

In my case, I have a an app built like this:

five dcc.Store(some_json_key, storage_type=’session’) in a row.

and Body() which builds the app.

Just by starting the app and checking the developer console, Only one of the json keys are on the session_storage (and it is not the first one).

I could transform all of them to memory storage, but I don’t know how to access the data with js. And I can’t merge all storage into one cause some of them trigger some callbacks.

Thanks in advance.

2

Hey @VanceVisaris, I am not sure I understand the issue. Do you mind explaining the issue based on the example?

# app.py
from dash import Dash, html, dcc, Input, Output, callback, no_update
import time

app = Dash(__name__)

app.layout = html.Div([
    html.H3("Session Storage Debug - Minimal Example"),
    html.Button("Save All Stores", id="btn-save", n_clicks=0),
    html.Br(), html.Br(),

    html.Div([
        dcc.Store(id='store-1', storage_type='session', data={'counter': 0, 'name': 'first'}),
        dcc.Store(id='store-2', storage_type='session', data={'counter': 0, 'name': 'second'}),
        dcc.Store(id='store-3', storage_type='session', data={'counter': 0, 'name': 'third'}),
        dcc.Store(id='store-4', storage_type='session', data={'counter': 0, 'name': 'fourth'}),
        dcc.Store(id='store-5', storage_type='session', data={'counter': 0, 'name': 'fifth'}),
    ], style={'display': 'none'}),

    html.Div(id='output'),
    html.Pre(id='raw-session-storage'),
    dcc.Interval(id='interval', interval=1500, n_intervals=0)
])


# Simple callback that increments counters in ALL stores
@callback(
    Output('store-1', 'data'),
    Output('store-2', 'data'),
    Output('store-3', 'data'),
    Output('store-4', 'data'),
    Output('store-5', 'data'),
    Input('btn-save', 'n_clicks'),
    prevent_initial_call=True
)
def update_all_stores(n):
    if n is None:
        raise no_update

    new_data = {
        'counter': n,
        'name': f"updated-{n}",
        'timestamp': time.time()
    }

    return [new_data] * 5


# Just shows which stores Dash actually sees
@callback(
    Output('output', 'children'),
    Input('store-1', 'data'),
    Input('store-2', 'data'),
    Input('store-3', 'data'),
    Input('store-4', 'data'),
    Input('store-5', 'data'),
)
def show_what_dash_sees(s1, s2, s3, s4, s5):
    stores = [s1, s2, s3, s4, s5]
    lines = []
    for i, s in enumerate(stores, 1):
        if s is None:
            lines.append(f"Store {i}:  None / not loaded")
        else:
            lines.append(f"Store {i}:  counter = {s.get('counter')}, name = {s.get('name')}")
    return html.Ul([html.Li(line) for line in lines])


# Shows raw sessionStorage content (what the browser really has)
@callback(
    Output('raw-session-storage', 'children'),
    Input('interval', 'n_intervals')
)
def show_raw_session_storage(_):
    return (
        "Open developer tools (F12) → Application → Session Storage\n"
        "Look at key names that start with 'dcc:' or your component ids\n\n"
        "Also run in console:\n"
        "Object.keys(sessionStorage).filter(k => k.includes('store-'))"
    )


if __name__ == '__main__':
    app.run(debug=True, port=8051)
3

Hello, what I meant was that if I open developer console and opened the storage tab and checked the session storage, only one key value pair was visible, with your example all five storage key-values are visible (plus the timestamp).

Your function Object.keys(sessionStorage).filter(k => k.includes('store-')) returns an array of 10 elements, the expected, 5 for the storage and 5 for the timestamp.

On the other hand, i tried the function Object.keys(sessionStorage) and they were there, the array of 10 elements, but they are not visible in the developer console gui.

So it seems that the app works as properly, I just can’t debug using only F12.

Thanks for the help. You understood perfectly, it was my bad for not explaining with the necessary details.

SOLUTION: The session_storage keys are there, just not visible in the Application tab in developer console, maybe due to json keys.

2 Likes
4

Don’t worry, we’re here to help. Please mark the topic as solved if you feel there are no further clarifications needed.