A dcc.Store that clears on every page change

Dash Python
1

I am storing some “clipboard” content in a dcc.Store. This content is only needed on the current page and should be deleted once the page is reloaded or switched to another page.

I have placed the dcc.Store at the top of the layout hierarchy like this:

   app.layout = html.Div(
        className="container",
        children=[
            dcc.Location(id='location', refresh=False), # represents the URL bar, doesn't render anything
            dcc.Store(id='memory'), # HTML5 local storage
            navbar,
            aspect_area,
        ]
    )

(I assumed this is mandatory. Would a dcc.Store object that is newly created when switching to the page solve the problem?)

I tried clearing the storage whenever the page changes, but the problem is that there is already a callback assigned to that output - of course the one that stores things in it.

@app.callback(
    Output('memory', 'data'),
    [
        Input('location', 'pathname')
    ]
)
def clear_clipboard(pathname):
    """Clears the HTML5 in-browser storage on each page switch"""
    return None

How can I achieve storage that persists only while the user is on the page?

2

I think what you’re looking for is the argument ‘storage_type’=‘local’

3

Simply creating the store with the storage_type="local" argument does not seem to do the trick.

    dcc.Store(id='memory', storage_type="local"), # HTML5 local storage

The content is retained across page loads. That seems to be the case independently of where I place the Store in the layout hierarchy.

4

I think the documentation of the dcc.Store component is not quite precise enough at this point: What exactly is a page refresh? An update of the page content by callback does not seem to count as a refresh.

Also, @Ncohen, the way I read this storage_type="local" makes the storage more persistent, being cleared only when the tab closes.

 # The memory store reverts to the default on every page refresh
dcc.Store(id='memory'),
# The local store will take the initial data
# only the first time the page is loaded
# and keep it until it is cleared.
dcc.Store(id='local', storage_type='local'),
# Same as the local store but will lose the data
# when the browser/tab closes.
dcc.Store(id='session', storage_type='session'),
5

I think what you need is a callback with output:
Output(‘memory’, ‘clear_data’),
which will clear the stored data.