Как сохранить состояние страницы React при перезагрузке или перенаправлении назад / вперед?

Question

Ниже мой код. Я использую API и получаю некоторые данные на текущей странице. Теперь я хочу сохранить состояние этой страницы при перезагрузке страницы или go назад или go снова вперед.

Здесь я получаю featureGroupID из API предыдущей страницы и сохраняю здесь в глобальной переменной customerID.

Я знаю, что это сделано с использованием локального хранилища, но, поскольку я очень новичок в Reactjs, я не знаю, как сохранить государство. Может кто-нибудь помочь?

class CustomerList extends Component {
  state = {
    isLoading: true,
    users: [],
    error: null,
    customerID: null
    };
    componentDidMount() {
      fetch('http://localhost:8080/entity/getEntityByFeatureGroup/'+this.customerID)
      .then(response => response.json())
      .then(data =>
       this.setState({
       users: data,
       isLoading: false,
    })
      ).catch(error => this.setState({ error, isLoading: false }));
	}
    render() {		
		var logTable = this.props;
		console.log(logTable);
      var customerColumnList = this.props;
      this.customerID = customerColumnList.location.aboutProps.id.featureGroupID;
      var headerName = customerColumnList.location.aboutProps.name.logTable.headerName;    
    const { isLoading, users, error } = this.state;
    return (....

Answer 1

вы можете использовать localStorage.setItem и localStorage.getItem для доступа к локальному хранилищу. как:

class CustomerList extends Component {
  state = {
    isLoading: true,
    users: [],
    error: null,
    customerID: null
    };
    componentDidMount() {
     if(!localStorage.getItem('customerlist-data)) {
        
fetch('http://localhost:8080/entity/getEntityByFeatureGroup/'+this.customerID)
      .then(response => response.json())
      .then(data => {
       this.setState({
       users: data,
       isLoading: false,
    });
       localStorage.setItem('customerlist-data', data);
      }
      ).catch(error => this.setState({ error, isLoading: false }));
     enter code here}          
	}
    render() {		
		var logTable = this.props;
		console.log(logTable);
      var customerColumnList = this.props;
      this.customerID = customerColumnList.location.aboutProps.id.featureGroupID;
      var headerName = customerColumnList.location.aboutProps.name.logTable.headerName;    
    const { isLoading, users, error } = this.state;
    return (....

Answer 2

Вы можете сохранить данные + текущее время и условно взять локальные данные или получить их снова с сервера.

Например, мы можем решить, что если у нас есть данные, хранящиеся локально, и час еще не пройден , мы отображаем локальные данные, в противном случае мы выбираем с сервера.

Вот грубый пример

const storageKey = "myData";
const toHour = ms => Number((ms / (1000 * 60 * 60)).toFixed(2));

const storeDataLocally = data => {
  const dataObj = {
    date: Date.now(),
    data
  };
  localStorage.setItem(storageKey, JSON.stringify(dataObj));
};

const getDataLocally = () => {
  const dataObj = localStorage.getItem(storageKey);
  return JSON.parse(dataObj);
};

class App extends React.Component {
  state = {
    data: []
  };

  getDataFromServer = () => {
    console.log("from server");
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data => {
        storeDataLocally(data);
        this.setState({ data });
      });
  };

  componentDidMount() {
    const localObj = getDataLocally();
    let shouldGetDataFromserver = false;
    if (localObj) {
      const isOneHourAgo =
        toHour(new Date()) - toHour(Number(localObj.date)) > 1;
      if (isOneHourAgo) {
        shouldGetDataFromserver = true;
      }
    } else {
      shouldGetDataFromserver = true;
    }

    shouldGetDataFromserver
      ? this.getDataFromServer()
      : this.setState({ data: localObj.data });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data.map(user => (
          <div key={user.id}>{user.name}</div>
        ))}
      </div>
    );
  }
}