# Retain Page State

**URL:** <https://community.plotly.com/t/retain-page-state/19696>\
**Category:** Dash Python\
**Created:** [February 17, 2019, 4:18pm UTC](https://community.plotly.com/t/retain-page-state/19696 "2019-02-17T16:18:33Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![josh270297](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@josh270297](https://community.plotly.com/u/josh270297)\
**Post date:** [February 17, 2019, 4:18pm UTC](https://community.plotly.com/t/retain-page-state/19696/1 "2019-02-17T16:18:33Z")

</div>

I have a multi-page app which has a main page and some further sub pages. Essentially I have a number of dropdown’s on the main page in which I need the selected values to retain when the user navigates to the other pages and back.

Unfortunately I only have access to a specific version of Dash which means I do not have the dcc.Store component. I have also read this post:

> [@Retain page state in multi-page apps when visiting other pages](https://community.plotly.com/t/retain-page-state-in-multi-page-apps-when-visiting-other-pages/11532):
>
> 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!

But ideally I don’t want to have to open the additional pages in another tab.

---

<div class="post-metadata">

**Author:** ![sjtrny](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sjtrny/32/12714_2.png) [@sjtrny](https://community.plotly.com/u/sjtrny)\
**Post date:** [February 18, 2019, 10:51am UTC](https://community.plotly.com/t/retain-page-state/19696/2 "2019-02-18T10:51:09Z")

</div>

Perhaps you could save the state in the URL?

Upon user changing the dropdown you can set the URL in the users browser and if they click back then it returns them to their previous state. You could also update links on the page to contain the URL state too.

> <https://github.com/plotly/dash/issues/188>

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [February 19, 2019, 2:54am UTC](https://community.plotly.com/t/retain-page-state/19696/3 "2019-02-19T02:54:10Z")

</div>

In multipage apps there’s no need to change the entire page contents for each URL. You could just change a content element that does not include the dropdowns. Then all your dropdowns will retain their value.

You could almost think about this like your dropdowns are contained within a sidebar that is not updated on page changes.

---

<div class="post-metadata">

**Author:** ![josh270297](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@josh270297](https://community.plotly.com/u/josh270297)\
**Post date:** [February 19, 2019, 8:42am UTC](https://community.plotly.com/t/retain-page-state/19696/4 "2019-02-19T08:42:23Z")

</div>

So essentially clicking the link to the next page just displays the content of that page rather than actually ‘going’ to that page? meaning the dropdowns retain their state its just they aren’t visible?

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [February 19, 2019, 9:54am UTC](https://community.plotly.com/t/retain-page-state/19696/5 "2019-02-19T09:54:26Z")

</div>

Yeah, although I didn’t realise you don’t want the dropdowns displayed on the new page. In that case you’d also need to hide the element containing the dropdowns, which makes it a little more involved, but still feasible.

The option is using the second “children” method of the tabs component, which I believe will retain it’s state when navigating between tabs: [https://dash.plot.ly/dash-core-components/tabs](https://dash.plot.ly/dash-core-components/tabs)

If you’re ok with the limitation of the layout of each tab being fixed.

---

<div class="post-metadata">

**Author:** ![josh270297](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@josh270297](https://community.plotly.com/u/josh270297)\
**Post date:** [February 19, 2019, 10:35am UTC](https://community.plotly.com/t/retain-page-state/19696/6 "2019-02-19T10:35:56Z")

</div>

Yeah I’ve decided to go with the tabs method - its a little slow on initial loading but works well when navigating between the pages. It also means that I can have dropdowns/checklists that update graphs which are on different pages which is very useful for my app. Thank you for the help nedned.

---

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [March 29, 2019, 8:31am UTC](https://community.plotly.com/t/retain-page-state/19696/7 "2019-03-29T08:31:30Z")

</div>

@nedned I also want to store the state of my tabs. Is it possible to store simply the children of tab1 content in a dcc.Store for example and have a callback functions which checks if the the dcc.Store is empty, if yes it loads the normal layout if dcc.Store is not empty it loads the children? Or is that not possible?

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [March 30, 2019, 7:46am UTC](https://community.plotly.com/t/retain-page-state/19696/8 "2019-03-30T07:46:46Z")

</div>

It sounds feasible, but I don’t have much hands on experience with the State and Tabs components, so I don’t think I can say for sure. Perhaps it’s worth starting a new post and skiing your question.
