在 React app localStorage 中存储查询参数值，并在多次访问后更新状态答案

【问题标题】：Store query param value in React app localStorage and update the state after visiting multiple times在 React app localStorage 中存储查询参数值，并在多次访问后更新状态
【发布时间】：2022-10-21 21:55:01
【问题描述】：

在我的 React 应用程序中，我有一个横幅。从某个系统用户被重定向到这个 React 应用程序，到某些页面。在这些重定向网址中，我们添加了一个查询参数例如：?redirectFrom=my-site。

然后在 React 中，当用户被重定向例如 2 次时，我们不再显示横幅。

我应该如何实现这个？我正在考虑将其存储在localStorage 中。但是如何确定并保存来自用户的 x 重定向量？

我如何实现这一目标？

【问题讨论】：

如果我错了，请纠正我如果你有例如 cookie 称为重定向，如果没有，请纠正我，如果没有，则将其设置为 1，否则将其设置为它的值 +1，如果你没有它，你检查的横幅或者你的数量小于你的特定数字，例如 2

标签： reactjs react-hooks local-storage query-parameters

【解决方案1】：

用户被重定向到页面www.my-react-app.com?redirectFrom=my-site
react 应用检查是否存在名为MY_REACT_APP_STORAGE 的本地存储

如果名为MY_REACT_APP_STORAGE 的本地存储不存在，请创建一个：

var storageData = {};
var url_string = window.location.href; 
var url = new URL(url_string);
var referrer = url.searchParams.get("redirectFrom");
storageData[referrer] = 1;
localStorage.setItem("MY_REACT_APP_STORAGE", JSON.stringify(storageData));

如果确实存在名为MY_REACT_APP_STORAGE 的本地存储，请检查react 应用程序是否已从同一引荐来源网址重定向到并相应地更新存储：

var url_string = window.location.href; 
var url = new URL(url_string);
var referrer = url.searchParams.get("redirectFrom");
var storageData = JSON.parse(localStorage.getItem("MY_REACT_APP_STORAGE"));
if (!storageData[referrer]) {
  storageData[referrer] = 1;
} else {
  storageData[referrer] = storageData[referrer] + 1;
}
localStorage.setItem("MY_REACT_APP_STORAGE", JSON.stringify(storageData));

在 react 应用程序中，只有当引用站点首次访问应用程序时，您才能呈现横幅：

// ...
render() {
  var url_string = window.location.href; 
  var url = new URL(url_string);
  var referrer = url.searchParams.get("redirectFrom");
  var storageData = JSON.parse(localStorage.getItem("MY_REACT_APP_STORAGE"));
  var bannerCSS = {
    display: 'none'
  };
  if (!storageData[referrer] || storageData[referrer] > 1) {
    bannerCSS.display = 'block';
  }

  return (<div>
    <div id="banner" style={bannerCSS}>...</div>
  </div>);
}
// ...

【讨论】：