React.js电影应用：如何持久化网格/列表显示模式的切换状态？

我是React新手，开发电影训练应用时碰到个问题：首页展示电影列表，Account组件里有按钮能切换列表的网格/列表显示模式。我在App.js里用useState维护moviesGridView状态，把状态和切换函数通过props传给Movies组件（根据状态渲染对应视图）和Account组件（点击按钮切换状态）。但切换状态后返回首页，视图又变回默认的网格模式，状态没法保留。

解决方案：用localStorage持久化状态 #

useState的状态只存在内存中，页面刷新、组件重新挂载时会重置成初始值。要保留状态，得把它存在浏览器本地存储里，步骤如下：

1. 初始化状态时优先从localStorage读取，没有则用默认值true
2. 更新状态时同步把新值存入localStorage
3. （可选）复用切换函数，避免重复逻辑

修改后的App.js代码 #

// 从localStorage读取初始状态，无值则用true
const [moviesGridView, setMoviesGridView] = useState(() => {
  const savedView = localStorage.getItem('moviesGridView');
  return savedView ? JSON.parse(savedView) : true;
});

const changeView = () => {
  const newViewState = !moviesGridView;
  setMoviesGridView(newViewState);
  // 将新状态存入localStorage
  localStorage.setItem('moviesGridView', JSON.stringify(newViewState));
};

<Route
  path="/"
  element={<Movies movies={popularMoviesList} gridView={moviesGridView} />}
/>

<Account
  moviesGridView={moviesGridView}
  changeView={changeView}
/>

优化Account组件代码 #

把切换逻辑复用App里的changeView函数，避免重复写状态切换逻辑：

// Account组件内的按钮
<button onClick={changeView}>
  Change Movies View
</button>

这样修改后，不管是刷新页面还是切换路由返回首页，都会从localStorage读取之前保存的视图状态，就能保持用户设置的显示模式了。

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