ReactJS：保存位置state

Question

I'm using React-Router to pass value from a page to another.

I have two Page: PageA and PageB

In the PageA I have add a button to go in the PageB, passing in the state a value:

<Button tag={Link} to={{pathname: `/pageB`, state: `${value.id}`}} replace color="primary">
 <span className="d-none d-md-inline">PageB</span>
</Button>

In the PageB :

  useEffect(() => {
    if(props.location.state){
      console.log("props.location.state ", props.location.state)
      filterWithValue(props.location.state)
    }
    else {
      filter();
    }

  }, [paginationState.activePage, paginationState.order, paginationState.sort]);

const dataFromValue= parameter => {
    const params = `id.equals=${parameter}`
    props.getDataFromValue(
      params,
      paginationState.activePage - 1,
      paginationState.itemsPerPage,
      `${paginationState.sort},${paginationState.order}`)
  }

  const filterWithValue= params => {
    dataFromValue(params)
    const endURL = `?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}${params ? '&' : ''}id.equal=${params}`;
    if (props.location.search !== endURL) {
      props.history.push(`${props.location.pathname}${endURL}`);
    }
  }

Basically in the pageB I check if I come from the pageA and so if I have value props.location.state I will use it to filter the data in the pageB using this value.

If I don't have the value (so I go in the pageB from another place) I call the filter() that shows all the data without filter for value.

Now my problem is that: if i reload the page or click back from the other page I basically lose the props.location.state and therefore filter () is always called.

How could I go about saving this value? So that if you refesh the page it stays with props.location.state

Answer 1

You can use Window.localStorage for it. See: https://www.w3schools.com/jsref/prop_win_localstorage.asp

Answer 2

You could use localStorage or sessionStorage .

sessionStorage.setItem("urlState", state);
const urlState = sessionStorage.getItem("urlState");

Main difference between local and session storages, that session will live only while browser not closed