如何在react的本地存储中保存复选框选中的值？

import React, { useState } from 'react';

function CheckboxList() {
  const [checkedValues, setCheckedValues] = useState([]);

  // 复选框选中状态改变时的回调函数
  const handleCheckboxChange = (event) => {
    const value = event.target.value;
    if (event.target.checked) {
      // 添加选中的值到状态中
      setCheckedValues([...checkedValues, value]);
    } else {
      // 从状态中移除取消选中的值
      setCheckedValues(checkedValues.filter((item) => item !== value));
    }
  };

  // 渲染复选框列表
  const renderCheckboxList = () => {
    const checkboxValues = ['选项1', '选项2', '选项3']; // 复选框的选项值

    return checkboxValues.map((value) => (
      <label key={value}>
        <input
          type="checkbox"
          value={value}
          checked={checkedValues.includes(value)}
          onChange={handleCheckboxChange}
        />
        {value}
      </label>
    ));
  };

  return <div>{renderCheckboxList()}</div>;
}

export default CheckboxList;