Material UI多选Checkbox：获取选中项及localStorage状态持久化方案

1. 获取选中项数组 #

你用的官网勾选标记示例里，是通过useState管理选中状态的，直接使用状态变量就能拿到所有选中项的数组。比如：

const [selected, setSelected] = useState([]);
// selected就是当前所有选中项的数组，比如选中"Option 1"和"Option 3"时，值为["Option 1", "Option 3"]

每次勾选/取消勾选选项，setSelected会自动更新这个数组，无需额外获取逻辑。

2. 存入localStorage的数据 #

直接存储选中项数组本身即可，因为localStorage仅支持字符串存储，所以需要用JSON.stringify转成字符串：

• 如果你的选项值是字符串（如官网示例的"Option 1"），直接存序列化后的数组
• 如果选项值是对象（如{value: 'opt1', label: '选项1'}），同样序列化后存储（注意对象不能包含不可序列化的内容，比如函数）

监听选中状态变化，自动同步到localStorage：

useEffect(() => {
  // 存入localStorage，键名可以自定义，比如'mui-multi-select-selected'
  localStorage.setItem('mui-multi-select-selected', JSON.stringify(selected));
}, [selected]); // 当selected变化时执行

3. 恢复选中状态 #

组件初始化时，从localStorage读取之前存储的数据，解析后作为useState的初始值，就能自动恢复之前的选中状态：

// 读取localStorage中的数据，没有的话用空数组作为默认值
const savedSelected = localStorage.getItem('mui-multi-select-selected');
const [selected, setSelected] = useState(savedSelected ? JSON.parse(savedSelected) : []);

完整修改后的示例代码 #

基于官网勾选标记示例修改，加入持久化逻辑：

import React, { useState, useEffect } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import Checkbox from '@mui/material/Checkbox';
import ListItemText from '@mui/material/ListItemText';

const MultiSelect = () => {
  // 从localStorage恢复初始选中状态
  const savedSelected = localStorage.getItem('mui-multi-select-selected');
  const [selected, setSelected] = useState(savedSelected ? JSON.parse(savedSelected) : []);

  // 选中状态变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem('mui-multi-select-selected', JSON.stringify(selected));
  }, [selected]);

  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    setSelected(
      // 对于多选，value是一个数组
      typeof value === 'string' ? value.split(',') : value,
    );
  };

  return (
    <Select
      multiple
      value={selected}
      onChange={handleChange}
      renderValue={(selected) => selected.join(', ')}
    >
      <MenuItem value="Option 1">
        <Checkbox checked={selected.includes('Option 1')} />
        <ListItemText primary="Option 1" />
      </MenuItem>
      <MenuItem value="Option 2">
        <Checkbox checked={selected.includes('Option 2')} />
        <ListItemText primary="Option 2" />
      </MenuItem>
      <MenuItem value="Option 3">
        <Checkbox checked={selected.includes('Option 3')} />
        <ListItemText primary="Option 3" />
      </MenuItem>
    </Select>
  );
};

export default MultiSelect;

注意事项 #

• 如果你的选项值是对象，要确保对象的结构能被JSON.stringify和JSON.parse正确处理，避免存储函数、Symbol等不可序列化的内容
• 可以自定义localStorage的键名，避免和其他功能的存储键冲突
• 页面跳转（包括刷新、跨页面返回）后，localStorage的数据会保留，组件加载时会自动读取恢复状态

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