Dash-Plotly如何实现页面刷新后保留Dropdown下拉菜单的选中值

你需要新增一个回调，读取dcc.Store中存储的值同步到Dropdown的value属性即可，具体实现如下：

1. 先修正现有Layout的语法错误 #

你当前的Layout代码中缺少子元素列表包裹、子组件之间缺少逗号，会直接触发语法错误，先调整：

import dash
from dash import html, dcc, Input, Output, callback
from dash.exceptions import PreventUpdate

# 假设你已经定义了Interval枚举和get_intervals()方法
app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Store(id='memory-intervals', storage_type='session'),
    dcc.Dropdown(
       id='time',
       options=get_intervals(),
       value=Interval.DAY.value,
       multi=False,
    )
])

2. 新增Store到Dropdown的同步回调 #

新增回调在页面加载时自动读取Store中的值赋值给Dropdown，如果Store没有存储过值就用默认值：

# 你已有的存储选中值的回调
@callback(
    Output('memory-intervals', 'data'),
    Input('time', 'value'),
)
def select_interval(interval):
    if interval is None:
        raise PreventUpdate
    return interval

# 新增的回写选中值的回调
@callback(
    Output('time', 'value'),
    Input('memory-intervals', 'data')
)
def set_stored_interval(stored_val):
    # 如果Store有值就用存储的值，没有就返回默认值
    return stored_val if stored_val is not None else Interval.DAY.value

实现逻辑说明 #

• 用户首次访问页面时，dcc.Store中没有存储数据，回调返回默认值给Dropdown
• 用户选中时间区间后，已有的存储回调会把选中值写入会话级Store
• 页面刷新后，浏览器会话保留的Store数据会触发回写回调，自动把存储的值赋值给Dropdown，不会再恢复为默认值

内容的提问来源于stack exchange，提问作者el_bastard0