在后退按钮点击（REACTJS）上执行代码

Question

例如，当我将一个页面浏览到另一个页面时，将执行以下代码。当我从类别页面列表中单击产品时，下面的代码会设置一个会话存储键，该键将具有类别页面的位置（滚动了多少页面）。

因此，当产品页面打开时，它会将其密钥保存在会话中，如果再次访问相同的类别页面，它会恢复页面位置。

我试图让这段代码只保存一个会话密钥并删除以前保存的会话密钥，无论用户点击网站的哪个页面（即类别页面、产品页面）。

CategoryPage.js

const [scrollPosition, setScrollPosition] = React.useState('');

 React.useEffect(() => {
   var pathName = document.location.pathname.substr(1);
   if (window) {
     window.onscroll = function (e) {
       setScrollPosition(window.scrollY);
       if(scrollPosition != 0){
         sessionStorage.setItem("scrollPosition_"+pathName, scrollPosition);
       }
     };
   }
 }, [scrollPosition]);

 React.useEffect(() => {
   var pathName = document.location.pathname.substr(1);
   if (window && sessionStorage.getItem("scrollPosition_"+pathName)) {
     $(window).scrollTop(sessionStorage.getItem('scrollPosition_'+ pathName));
     console.log('position_set to = ' + sessionStorage.getItem('scrollPosition_'+ pathName));
   }
 }, []);

关于删除以前的会话密钥的任何想法？

Answer 1

我的理解是在加载页面时，您想要：

1. 如果此页面是上次访问的页面：加载其保存的位置。
2. 否则：删除最后保存的位置并在滚动时保存它。

那么看起来您需要保存某种页面 ID 以及您正在保存/加载的位置。这个唯一标识符显然可以是URL。

然后，您可以使用类似版本的代码：

 const [scrollPosition, setScrollPosition] = React.useState('');
 const getPathname = () => document.location.pathname.substr(1);

 React.useEffect(() => {
   if (window) {
     window.onscroll = function (e) {
       setScrollPosition(window.scrollY);
       if (scrollPosition != 0) {
         const savedPosition = { position: scrollPosition, pathName: getPathname() };
         sessionStorage.setItem('scrollPosition', JSON.stringify(savedPosition));
       }
     };
   }
 }, [scrollPosition]);

 React.useEffect(() => {
   const lastSavedPosition = JSON.parse(sessionStorage.getItem('scrollPosition'));
   if (window && lastSavedPosition && getPathname() === lastSavedPosition.pathName) {
      $(window).scrollTop(lastSavedPosition.position);
      console.log(`position_set to = ${lastSavedPosition.position}`);
   }
 }, []);