React中如何通过LocalStorage实现页面刷新后保留语言偏好设置

当前语言状态仅存储在Redux运行时内存中，页面刷新后内存数据会重置为初始默认值，因此会回到荷兰语。要实现刷新后保留语言设置，需要将用户语言偏好持久化存储在localStorage中，初始化时优先读取存储的值即可，修改如下：

• 第一步：修改语言切换逻辑，用户选择语言后同步存入本地存储
  修改handleLanguageChange函数：

function handleLanguageChange(lng) {
    dispatch(changeLanguage(lng.id));
    // 新增：持久化存储用户选择的语言
    localStorage.setItem('preferredLanguage', lng.id);
    langMenuClose();
}

• 第二步：修改初始化逻辑，优先读取本地存储的语言设置
  如果你的项目使用i18next管理国际化，修改i18n初始化配置：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    // 优先读本地存储的语言偏好，不存在则用默认荷兰语
    lng: localStorage.getItem('preferredLanguage') || 'nl',
    // 其余原有配置保持不变
    resources: {
      nl: { /* 原有荷兰语翻译包 */ },
      en: { /* 原有英文翻译包 */ }
    }
  });

如果你是自己用Redux管理i18n状态，修改对应reducer的初始值即可：

const initialState = {
  // 优先读取本地存储的值
  language: localStorage.getItem('preferredLanguage') || 'nl'
};

function i18nReducer(state = initialState, action) {
  switch(action.type) {
    case 'CHANGE_LANGUAGE':
      return { ...state, language: action.payload };
    default:
      return state;
  }
}

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