# Retain page state in multi-page apps when visiting other pages

**URL:** <https://community.plotly.com/t/retain-page-state-in-multi-page-apps-when-visiting-other-pages/11532>\
**Category:** Dash Python\
**Created:** [July 5, 2018, 5:33pm UTC](https://community.plotly.com/t/retain-page-state-in-multi-page-apps-when-visiting-other-pages/11532 "2018-07-05T17:33:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![oriolmirosa](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/oriolmirosa/32/3235_2.png) [@oriolmirosa](https://community.plotly.com/u/oriolmirosa)\
**Post date:** [July 5, 2018, 5:33pm UTC](https://community.plotly.com/t/retain-page-state-in-multi-page-apps-when-visiting-other-pages/11532/1 "2018-07-05T17:33:55Z")

</div>

I have a multi-page app. The second page provides details on elements clicked in a table in the first one. The problem is that, when returning to the first page from the second, the page has been refreshed to its original state instead of remaining on the state it was when the click to the second page took place.

Is there a way to ensure that the state in one page is retained when visiting another page in multi-page apps?

Thanks for any help you can provide!

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [July 6, 2018, 3:37am UTC](https://community.plotly.com/t/retain-page-state-in-multi-page-apps-when-visiting-other-pages/11532/2 "2018-07-06T03:37:34Z")

</div>

> [@oriolmirosa](#):
>
> Is there a way to ensure that the state in one page is retained when visiting another page in multi-page apps?

One way to do this would be to hide/show content instead of removing/adding content. It will make the app slower (because _all_ of the content needs to be loaded upfront) but it would be an easy way to preserve state.

Here’s an example: [dash-recipes/dash-urls-hide-show-tabs.py at master · plotly/dash-recipes · GitHub](https://github.com/plotly/dash-recipes/blob/master/dash-urls-hide-show-tabs.py)

 ![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/5/5dc56e6c442a191d6244a01d4ce7810f1e1a3206.gif)

There might be other ways to do this as well, like saving the data in a hidden div that is in the “global” `app.layout` and then feeding state from that hidden div into the underlying page’s controls.

Let us know what you end up with!

---

<div class="post-metadata">

**Author:** ![oriolmirosa](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/oriolmirosa/32/3235_2.png) [@oriolmirosa](https://community.plotly.com/u/oriolmirosa)\
**Post date:** [July 7, 2018, 6:46pm UTC](https://community.plotly.com/t/retain-page-state-in-multi-page-apps-when-visiting-other-pages/11532/3 "2018-07-07T18:46:30Z")

</div>

Thanks for your help with this, @chriddyp. I have implemented this by hiding/showing the two pages and it works fine. As you said, it’s a little slower on load, but I don’t think my employer will mind. Thanks again!

---

<div class="post-metadata">

**Author:** ![oriolmirosa](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/oriolmirosa/32/3235_2.png) [@oriolmirosa](https://community.plotly.com/u/oriolmirosa)\
**Post date:** [July 8, 2018, 7:34pm UTC](https://community.plotly.com/t/retain-page-state-in-multi-page-apps-when-visiting-other-pages/11532/4 "2018-07-08T19:34:07Z")

</div>

Well, I spoke too soon. Once I deployed the app the 2 second delay at the start on my system became a 20 second delay on the server. Ugh. So I’m back to square one. I’ll report back if I find a performant solution.

---

<div class="post-metadata">

**Author:** ![oriolmirosa](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/oriolmirosa/32/3235_2.png) [@oriolmirosa](https://community.plotly.com/u/oriolmirosa)\
**Post date:** [July 9, 2018, 5:33pm UTC](https://community.plotly.com/t/retain-page-state-in-multi-page-apps-when-visiting-other-pages/11532/5 "2018-07-09T17:33:47Z")

</div>

In the end, instead of solving the problem I decided to avoid it. The second page in my app provides details on a table in the first page. As I described [in this post](https://community.plotly.com/t/click-data-for-more-details/11325/2?u=oriolmirosa), I have a link in each cell of the main table that contains the column and row as part of the URL’s query, and these are used to build the details object shown in the second page. I was using a `dcc.Link` to get to the details page, and the problem was that returning to the main page meant that its state was lost.

All I did, then, was replace the `dcc.Link`s with `html.A`s with `target=_blank`. This way, the details page opens in a new tab and the main page remains in the previous tab retaining its state. Not too elegant, but it gets the job done for my use-case.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [July 9, 2018, 6:14pm UTC](https://community.plotly.com/t/retain-page-state-in-multi-page-apps-when-visiting-other-pages/11532/6 "2018-07-09T18:14:34Z")

</div>

> [@oriolmirosa](#):
>
> All I did, then, was replace the `dcc.Link` s with `html.A` s with `target=_blank` . This way, the details page opens in a new tab and the main page remains in the previous tab retaining its state.

Yeah, that’s another good idea. Thanks for sharing!
