Dash-Plotly：在页面重新加载时保持下拉选择答案

【问题标题】：Dash-Plotly: keep dropdown selection on page reloadDash-Plotly：在页面重新加载时保持下拉选择
【发布时间】：2021-07-21 11:30:59
【问题描述】：

我对 python 中的 Web 开发非常陌生，目前正在开发一个 dash-plotly 应用程序。在应用程序中有一个下拉菜单供用户选择图表中显示数据的特定时间间隔。刷新页面时，选择显然会恢复为默认值。这个简化的代码显示了下拉设置：

import dash_core_components as dcc

app = dash.Dash(__name__)
app.layout = html.Div(
    dcc.Store('memory-intervals', storage_type='session')
    dcc.Dropdown(
       id='time',
       options=get_intervals(),
       value=Interval.DAY.value,
       multi=False,
    ),
)

我现在理解的是，我可以通过dash的Store组件在浏览器会话中存储数据。我设法像这样存储选择：

@app.callback(
    Output('memory-intervals', 'data'),
    Input('time', 'value'),
)
def select_interval(interval):
    if interval is None:
        raise PreventUpdate

    return interval

所以我被困在这一点上......如何在页面重新加载后将商店的数据设置为选择值？

提前谢谢你！

【问题讨论】：

标签： flask dropdown plotly-dash

【解决方案1】：

您可以使用 Dash persistence 功能。

根据文档：

persistence_type（'local'、'session' 或 'memory'；默认为 'local'）：持久的用户更改将存储在哪里：

内存：只保存在内存中，页面刷新时重置。这对例如，如果您有一个选项卡式应用程序，它会在不同的选项卡处于活动状态，并且您希望在切换时保持更改选项卡，但不是在重新加载应用程序后。

local: 使用 window.localStorage。这是默认设置，并保留该计算机上该浏览器中无限期的数据。

会话： 使用 window.sessionStorage。像“本地”一样保留数据当您重新加载页面时，但在您关闭浏览器或在新的浏览器选项卡中打开应用。

在您的示例中，如果您只需要在重新加载后保留下拉值，而不是在退出浏览器或关闭选项卡后，您可以编写：

import dash_core_components as dcc

    app = dash.Dash(__name__)
    app.layout = html.Div(
        dcc.Store('memory-intervals', storage_type='session')
        dcc.Dropdown(
           id='time',
           options=get_intervals(),
           value=Interval.DAY.value,
           multi=False,
           persistence = True,
           persistence_type = 'session'
        ),
    )

但是，如果您需要将该选择无限期地保留在该计算机上的该浏览器中，您可以简单地使用 persistence = True，因为“本地”类型是默认值。

【讨论】：

【解决方案2】：

我不知道这是否是最好的解决方案，但关于plotly documentation，我设法做到了：

@app.callback(
    Output('time', 'value'),
    Output('memory-intervals', 'data'),
    Input('time', 'value'),
    Input('memory-intervals', 'data'),
    Input('memory-intervals', 'modified_timestamp'),
)
def select_interval(dd_interval, memory_interval, timestamp):
    ctx = dash.callback_context
    trigger_id = ctx.triggered[0]["prop_id"].split(".")[0]

    if trigger_id == 'time':
        interval = dd_interval
    elif timestamp == -1 or memory_interval is None:
        interval = Interval.DAY.value
    else:
        interval = memory_interval

    return interval, interval

【讨论】：