如何使用localStorage存储复选框值？(react+hooks)

import React, { useState, useEffect } from 'react';

const [checkedValues, setCheckedValues] = useState([]);

useEffect(() => {
  const storedValues = localStorage.getItem('checkboxValues');
  if (storedValues) {
    setCheckedValues(JSON.parse(storedValues));
  }
}, []);

const handleCheckboxChange = (e) => {
  const value = e.target.value;
  const isChecked = e.target.checked;

  if (isChecked) {
    // 添加选中的值
    setCheckedValues((prevValues) => [...prevValues, value]);
  } else {
    // 移除取消选中的值
    setCheckedValues((prevValues) =>
      prevValues.filter((val) => val !== value)
    );
  }
};

useEffect(() => {
  localStorage.setItem('checkboxValues', JSON.stringify(checkedValues));
}, [checkedValues]);

return (
  <div>
    <label>
      <input
        type="checkbox"
        value="value1"
        checked={checkedValues.includes('value1')}
        onChange={handleCheckboxChange}
      />
      Option 1
    </label>
    <label>
      <input
        type="checkbox"
        value="value2"
        checked={checkedValues.includes('value2')}
        onChange={handleCheckboxChange}
      />
      Option 2
    </label>
  </div>
);