Dash/Flask应用本地化持久化异常问题求助

问题根源 #

1. LocalStorage初始化错误：原display_page回调中，当语言标识为空时直接返回新的dcc.Store组件，覆盖了原有Store实例，导致页面加载时重置为英语。
2. 翻译触发逻辑不完整：部分组件的翻译依赖未正确绑定语言变化，导致切换后刷新或部分内容未更新。

修复方案 #

1. 重构LocalStorage初始化逻辑 #

新增专门的初始化回调，避免覆盖原有Store：

# 新增：初始化LocalStorage语言设置（首次加载时自动设为en）
@app.callback(
    Output("language-store", "data"),
    Input("language-store", "data"),
    prevent_initial_call=False
)
def init_language_store(language):
    if language is None:
        return "en"
    return no_update

修改原display_page回调，移除返回Store的错误逻辑：

@app.callback(
    Output("page-content", "children"),
    [Input("url", "pathname"), Input("language-store", "data")]
)
def display_page(pathname, language):
    current_lang = language or "en"
    translations = load_translations(current_lang)
    if pathname == "/graph/1":
        return graph_layout(translations)
    else:
        home_html = load_html_template("assets/home.html")
        translated_html = translate_html(home_html, translations)
        return dcc.Markdown(translated_html, dangerously_allow_html=True)

2. 优化语言切换回调 #

添加prevent_initial_call=True避免首次加载误触发，确保仅在点击语言选项时更新：

@app.callback(
    Output("language-store", "data"),
    [Input("set-lang-en", "n_clicks"), Input("set-lang-ru", "n_clicks")],
    prevent_initial_call=True
)
def update_language(en_clicks, ru_clicks):
    ctx = dash.callback_context
    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
    if button_id == "set-lang-en":
        return "en"
    elif button_id == "set-lang-ru":
        return "ru"
    return no_update

3. 增强HTML翻译准确性 #

使用正则表达式替换，避免原文本干扰匹配：

import re  # 需要在文件顶部导入re模块

# 修改翻译函数
def translate_html(content, translations):
    for key, value in translations.items():
        # 精准匹配id属性后的文本内容
        content = re.sub(f'(id="{key}">)(.*?)(<)', rf'\1{value}\3', content)
    return content

效果验证 #

• 首次加载：LocalStorage为空时自动设置为en，页面显示英文内容。
• 切换语言：点击俄语选项后，LocalStorage更新为ru，所有组件（导航栏、首页内容、图表标题）自动切换为俄语。
• 页面刷新：重新加载页面时，自动读取LocalStorage中的语言标识，保持所选语言不变。

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