ReactJS -如何使用localeStorage创建回退语言函数

// 获取用户选择的语言
function getSelectedLanguage() {
  // 从localStorage中获取语言设置
  const selectedLanguage = localStorage.getItem('language');
  
  // 如果没有设置过语言，则返回默认语言
  if (!selectedLanguage) {
    return 'en'; // 默认语言为英文
  }
  
  return selectedLanguage;
}

// 设置用户选择的语言
function setSelectedLanguage(language) {
  // 将语言设置保存到localStorage中
  localStorage.setItem('language', language);
}

// 使用回退语言函数
function App() {
  const [language, setLanguage] = useState(getSelectedLanguage());

  // 处理语言选择变化
  function handleLanguageChange(event) {
    const selectedLanguage = event.target.value;
    setLanguage(selectedLanguage);
    setSelectedLanguage(selectedLanguage);
  }

  return (
    <div>
      <select value={language} onChange={handleLanguageChange}>
        <option value="en">English</option>
        <option value="zh">中文</option>
      </select>
      <p>当前语言：{language}</p>
    </div>
  );
}