如何持久化数据表LocalStorage ReactJS挂钩

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

const DataGrid = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 从LocalStorage中读取之前保存的数据
    const savedData = localStorage.getItem('data');
    if (savedData) {
      setData(JSON.parse(savedData));
    }
  }, []);

  useEffect(() => {
    // 将数据保存到LocalStorage中
    localStorage.setItem('data', JSON.stringify(data));
  }, [data]);

  const handleAddRow = () => {
    // 添加新的数据行
    const newData = [...data, { id: data.length + 1, name: 'New Row' }];
    setData(newData);
  };

  return (
    <div>
      <button onClick={handleAddRow}>Add Row</button>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <tr key={row.id}>
              <td>{row.id}</td>
              <td>{row.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default DataGrid;