Dcc.store cleared on page refresh even when storage_type = session?

Dash Python
1

Hi there,

Hoping to gain some help/ understanding on the default behavior for dcc.store component.

So far, I’ve noticed that whenever I refresh the page- the contents of the store component become empty, even when I specify the storage_type = ‘session’ despite the documentation saying that the data is only cleared when the browser is quit.

In the official documentation, for the buttons clicked example- if I refresh the page, page clicks for session storage is still intact. So I think my implementation is just likely wrong.

Could anyone provide some guidance? I’ve put a simplistic example below, which illustrates my issue along with a snapshot of the data clearing.

issue
issue703×249 6.82 KB 

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__, suppress_callback_exceptions=True)



index_page = html.Div(
    id = 'index_page',
    children=[
                dcc.Link('Go to Page 1', href='/page-1'),
                html.Br(),
                dcc.Link('Go to Page 2', href='/page-2'),
            ],
    style={'display': 'block', 'line-height': '0', 'height': '0', 'overflow': 'hidden'})

page_1_layout = html.Div(
    id= 'page_1_layout',
    children= [    
        dcc.Dropdown(
            id='page-1-dropdown',
            options=[{'label': i, 'value': i} for i in ['SFO', 'JFK', 'LAX']],
            value='SFO'),
        html.Div(id='page-1-content'),
    # dcc.Store(id='src_data',storage_type='session'),
        html.Button('Submit', id='p1_button'),
        html.Br(),
        dcc.Link('Go to Page 2', href='/page-2'),
        html.Br(),
        dcc.Link('Go back to home', href='/'),
        html.H1('Page 1')],

    style={'display': 'block', 'line-height': '0', 'height': '0', 'overflow': 'hidden'})

@app.callback(Output('page-1-content', 'children'),
              [Input('page-1-dropdown', 'value')],
              [State('src_data', 'data')])
def page_1_dropdown(value,src):
    # print('HERE IS SRC',src)
    return value


page_2_layout = html.Div(
    id='page_2_layout',
    children=[
        html.H1('Page 2'),
        dcc.Dropdown(
            id='page-2-dropdown',
            options=[{'label': i, 'value': i} for i in ['ORD', 'YUL', 'HND']],
            value='HND'),
        html.Button('Submit', id='p2_button'),
        html.Div(id='page-2-content'),
        html.Br(),
        dcc.Link('Go to Page 1', href='/page-1'),
        html.Br(),
        dcc.Link('Go back to home', href='/')
    ],
    style={'display': 'block', 'line-height': '0', 'height': '0', 'overflow': 'hidden'})


app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content',
             # I added this children attribute
         children=[index_page, page_1_layout, page_2_layout]),
    dcc.Store(id='src_data',storage_type='session')
    
])


@app.callback(Output('page-2-content', 'children'),
              [Input('page-2-dropdown', 'value')],
              [State('src_data', 'data')])
def page_2_radios(value,src):
    # print("HERE IS SRC",src)
    # test = 'You have selected' + value + ' in page 2' 
    return value


@app.callback(Output('src_data', 'data'),
              [Input('p1_button', 'n_clicks'),Input('p2_button', 'n_clicks')],
              [State('src_data', 'data'),State('page-1-content', 'children'),State('page-2-content', 'children')])
def update_src(p1button,p2button,src,p1,p2):
    
    ctx = dash.callback_context
    triggered = ctx.triggered[0]['prop_id']
    # print(triggered)
    data_list = src.copy() if src!= None else []

    if triggered == "p1_button.n_clicks":
        if p1 != None:
            data_list.append(p1)

    elif triggered == "p2_button.n_clicks":
        if p2 != None:
            data_list.append(p2)

    # print('Src_data is ',data_list)
    print('data_list contents',data_list)
    return data_list



@app.callback(
    [Output(page, 'style') for page in ['index_page', 'page_1_layout', 'page_2_layout']],
    # I turned the output into a list of pages
    [Input('url', 'pathname')])
def display_page(pathname):
    return_value = [{'display': 'block', 'line-height': '0', 'height': '0', 'overflow': 'hidden'} for _ in range(3)]
    # print(return_value)

    if pathname == '/page-1':
        print('Page 1')
        return_value[1] = {'height': 'auto', 'display': 'inline-block'}
        return return_value
    elif pathname == '/page-2':
        return_value[2] = {'height': 'auto', 'display': 'inline-block'}
        return return_value
    else:
        return_value[0] = {'height': 'auto', 'display': 'inline-block'}
        return return_value


if __name__ == '__main__':
    app.run_server(debug=True,port = 8059,)
2

I got similar problem. My storage_type is “local”. But I lost all storage when page got reloading. Anyone know why?
BTW, the local storage didn’t disapear even when I close the browser. But it will be wiped out when the page got reloaded.

3

I’m also running into this issue. Did you find a solution?

4

Hi! I was able to get my code working with:

def serve_layout():
    return html.Div(id='parent', children=[
        dcc.Input(id="logged_in_user", type="text", style = {'display': 'none'}, persistence = True, persistence_type = 'session'),
        dcc.Location(id='url', refresh=False),
        dcc.Store(id='session', storage_type = 'local')

    ])

and this callback:

##store login
@app.callback(
        Output('session','data'),
        [Input('logged_in_user','value')])
def return_name(value):
    if value is None:
        raise dash.no_update
    else:
        data = [{'logged_in_user':value}]
        return data
1 Like
5

It happens only when I deployed it to server. If I ran it on local, the local storage keeps after reloading. Anyone knows why?

6

Facing the same issue, Do we have a workaround for this ??

7

Hi, Finally I made it work.

Consider the below points to make it work:

I included the ‘state’ in both the read and write session callbacks.
while reading the session data, we must consider including the timestamp as mentioned in the store Also I use Dictionary to store and retrieve data.

Hope this helps. Happy Coding