Javascript 如何在react js中持久化url中的数据搜索参数

我正在开发一个应用程序，它需要从api获取数据并更改用户输入的数据。这里的问题是，当用户首次装载页面时，他们应该每月发送一个默认值

和
2020
。但若用户做了任何更改，并且刷新了页面，那个么它应该向用户发送更新的数据。例如，如果用户选择“半年”和
2018
，则刷新时应发送
半年和
2018
。
我不确定这是否可能在reacjs中实现

我尝试过这样做，但不起作用，每次我刷新页面时，
每月
和
2020

这是我的密码

const DispensingIncidents = (props) => {
  const classes = useStyles();
  const {
    getFilterData,
    dispensingData,
    getPeriodList,
    getOverviewData,
    location,
    history,
  } = props;

  const [timeSpan, setTimeSpan] = React.useState("Monthly");
  const [year, setYear] = React.useState(2020);
  const [tabValue, setTabValue] = React.useState(0);
  const [spanData, setSpanData] = React.useState([]);
  const { loading, duration, period, dispensingOverviewData } = dispensingData;
  const { count } = dispensingOverviewData;

  useEffect(() => {
    getPeriodList();
  }, [getPeriodList]);

  useEffect(() => {
    history.replace({
      pathname: location.pathname,
      search: `?year=${year}&period=${timeSpan}`,
    });
    setYear(year);
    setTimeSpan(timeSpan);
    // eslint-disable-next-line
  }, [year, timeSpan]);

  useEffect(() => {
    getFilterData(year);
  }, [getFilterData, year]);

  function useQuery() {
    return new URLSearchParams(location.search);
  }
  const query = useQuery();



  // eslint-disable-next-line
  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
  };

  const handleYearChange = (event) => {
    setYear(event.target.value);
    setTimeSpan(query.get("period"));
  };

  const handleSpanChange = (event) => {
    const value = event.target.value;

    setTimeSpan(value);
  };

  const time = query.get("period");

  useEffect(() => {
    if (time === "Yearly") {
      const yearlyData = duration["yearly"];
      setSpanData(yearlyData);
    } else if (time === "Weekly") {
      const weeklyData = duration["weekly"];
      setSpanData(weeklyData);
    } else if (time === "Quarterly") {
      const quarterlyData = duration["quarterly"];
      setSpanData(quarterlyData);
    } else if (time === "Monthly") {
      const monthlyData = duration["monthly"];
      setSpanData(monthlyData);
    } else if (time === "6 months") {
      const halfYearlyData = duration["half-yearly"];
      setSpanData(halfYearlyData);
    }
  }, [time, duration]);

任何帮助都会很好。
好吧，说到刷新整个页面，我想你可以使用localStorage，或者像上面解释的那样使用本地存储。
当你刷新页面时，你应用程序中的所有数据，例如状态、道具、redux状态等都会消失。
有几种方法可以保存数据：


将其存储在后端
将其存储在localStorage中，如上面的注释所述
把它放在饼干里

启动应用程序时（例如，刷新后），应检查之前是否将数据保存在任何位置。然后在钩子中将其设置为默认值。您好，您需要一个函数来解码URL参数，另一个函数对它们进行编码，并同步状态值和URL参数

const valueFromURL = decodeYourURLParams(window.location.search)
const [valuesYouExpect, setValuesYouExpect] = useState(valueFromURL);

// or setting your state in useEffect if it's more proper

您需要能够将参数传递给
getPeriodList（）
函数，以便将参数附加到API调用中

useEffect(() => {
   getPeriodList(decodeYourURLParams(window.location.search); // for instance
}, [getPeriodList, valuesYouExpect]);

然后，每当用户更改该值时，创建一个新的URL并将新状态推送到
历史

function updateValues(newValues) {
  const updatedValues = { ...valuesYouExpect, ...newValues };
  const { pathname, origin } = window.location;
  const newURL = `${origin}${pathname}?${encodeYourUrlParams(updatedValues)}`;

  // now change the URL
  window.history.replaceState({}, '', newURL);

  updateStateValues(updatedValues);

现在，当您的值被更新时，
history
将被更新，并且它将使用您的参数触发对API的调用

当URL中设置的刷新参数传递到组件时也是如此。
我想您有一个API来设置输入数据，还有一个API用于获取上次保存的数据？我没有API来获取上次保存的数据，我只是将用户选择的数据存储到URL。