Dash Plotly Share Callback Input in another page with dcc.Store

Hi guys,

i have a 2 pages app, on the first page (app.py), i use dcc.Store to store a value in the session cache, and then trying to load this data in the 2nd page (app2.py), and show it as html.H1.

Here is my code in page one:

dcc.Store(id='session', storage_type='session'), 

then my callback on this page is:

@app.callback(Output('session', 'data'),
              [Input('q1', 'value')])
def q1_value(q1):
     return {'answer1value': q1}

while “q1” is a value from my radioitem.

Then on my 2nd page (app2.py), i call the data out with this:

@app.callback(Output('results', 'children'),
              [Input('session', 'data')]
def result(data):
    math = data['answer1value']
    return 'your answer is "{}"'.format(math)

results is the id of my “html.Div(html.H1(id=“results”))”

But when i run this app, nothing is shown up in this H1. I have spent many hours to fix this but fail, would you one please help ?


So, I’m not an expert on multiple pages app, but I suppose you are displaying your pages like in this example https://dash.plotly.com/urls ?

If you do, I think your problem is that you only have on page loaded at a time, so once you have loaded the second page, your first doesn’t exist anymore, so to speak, and you can’t access any element in it.

A solution would be to put the store in your main layout, like this:

app.layout = html.Div([
    # represents the URL bar, doesn't render anything
    dcc.Location(id='url', refresh=False),

    dcc.Link('Navigate to "/"', href='/'),
    dcc.Link('Navigate to "/page-2"', href='/page-2'),

    dcc.Store(id='session', storage_type='session')
    # content will be rendered in this element

It should now be accessible by the two pages.
Hope this was helpful!

Thank you @ Lheira, thank you a lot for dropping by! i appreciate your answer.

i followed your instruction, and put the

` dcc.Store(id='session', storage_type='session')`

into the index.py of my app, but i still can 't call it from the other page.

Unless you changed your code since putting it on github, you didn’t put the store at the right place. Here is where it should be:

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    dcc.Store(id='session', storage_type='session'),
    # load the specific page

It seems to work on my computer :slight_smile:

1 Like

Awesome! it works like charms! Thank you @Lheira!

when I want to get the dcc.store data from page1 to another page.

on anoother page, I can not use dcc.store as input…

I got this error

this is the part of my page1

and this is the part of another page.

hi @Y.J
Here’s a good example of how to use dcc.Store in a multipage app, written by Ann Marie.

self answer !

at first, thanks to reply about my problem!! you guys are so smart! and kind !!

by the way, my problem that I shared was solved.

for another people who can face with the same problem I met, I write this.

my solution was to put “the same dcc.store” in the another page layout where I want to get the value.

I thought I didn’t need to put the dcc on the page layout that received data.

ps. I don’t use "dash_lab "