在React页面重新加载时保留数据的实现方法总结

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

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

  useEffect(() => {
    // 从 Local Storage 加载数据
    const savedData = localStorage.getItem('myData');
    if (savedData) {
      setData(savedData);
    }
  }, []);

  useEffect(() => {
    // 将数据保存到 Local Storage
    localStorage.setItem('myData', data);
  }, [data]);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <p>Data: {data}</p>
    </div>
  );
};

export default MyComponent;

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

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

  useEffect(() => {
    // 从 Session Storage 加载数据
    const savedData = sessionStorage.getItem('myData');
    if (savedData) {
      setData(savedData);
    }
  }, []);

  useEffect(() => {
    // 将数据保存到 Session Storage
    sessionStorage.setItem('myData', data);
  }, [data]);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <p>Data: {data}</p>
    </div>
  );
};

export default MyComponent;

import React, { useState, useEffect } from 'react';
import { useLocation, useHistory } from 'react-router-dom';

const useQuery = () => {
  return new URLSearchParams(useLocation().search);
};

const MyComponent = () => {
  const query = useQuery();
  const history = useHistory();
  const [data, setData] = useState(query.get('data') || '');

  useEffect(() => {
    // 更新 URL 参数
    history.replace(`?data=${data}`);
  }, [data, history]);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <p>Data: {data}</p>
    </div>
  );
};

export default MyComponent;

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

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

  useEffect(() => {
    // 从服务器加载数据
    axios.get('/api/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('There was an error loading the data!', error);
      });
  }, []);

  useEffect(() => {
    // 将数据保存到服务器
    axios.post('/api/data', { data })
      .catch(error => {
        console.error('There was an error saving the data!', error);
      });
  }, [data]);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <p>Data: {data}</p>
    </div>
  );
};

export default MyComponent;