El siguiente código se ejecuta cuando navego de una página a otra, por ejemplo. cuando hago clic en un producto de la lista de páginas de categorías, el siguiente código establece una clave de almacenamiento de sesión que tendrá una posición de la página de categorías (cuánto se ha desplazado la página).
Entonces, cuando se abre la página del producto, guarda su clave en la sesión y si nuevamente visitó la misma página de categoría, restaura la posición de la página.
Estoy tratando de hacer que este código guarde solo una clave de sesión y elimine la clave de sesión guardada anteriormente, independientemente de la página en la que el usuario haga clic en el sitio web (es decir, página de categoría, página de producto).
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)); } }, []);¿Alguna idea sobre esto para eliminar la clave de sesión anterior?
Si está utilizando redux con reaccionar, puede crear un reductor que rastree la ubicación enviando acciones que contengan la información si el usuario estaba en la página del producto.
Algo como esto:
Así que si tienes pocas rutas como:
/category/house/3213124(product_id) /category/garden/dsfsdfs(product_id)En su enrutador puede direccionarlos así:
/category/house/{id} /category/garden/{id}Entonces puedes usar:
let { id } = useParams(); if(id !== undefined || ""){ dispatch(userIsOnProductPageAction(true)) }Cuando los usuarios hacen clic en el botón Atrás usando un selector para reducir, tiene información de que era un usuario en la página del producto... si es verdadero , ejecute el código, si es falso , no haga nada .
Además, después de ejecutar el código, envía userIsOnProductPageAction(false) .
Si no está utilizando redux, puede aplicar la misma lógica, pero el problema es que debe mantener el estado wasUserOnPage y acceder de alguna manera cuando está en la página de categoría.
Como no sé cómo se ve su aplicación React, no puedo decirle cómo lograrlo. Si el producto es un elemento secundario y la categoría es un elemento principal, al hacer clic en el botón Atrás, probablemente podría enviar esa información a través de accesorios.
EDITAR: debería verse algo como esto
class main extends React.Component { constructor(props) { super(props) this.handler = this.handler.bind(this) } handler() { this.setState({ wasOnProductPage:false }) } render() { return <Category handler = {this.handler} props={this.props.wasOnProductPage} /> <Product handler = {this.handler} /> } } class Category extends React.Component { render() { if(props){ do code for viewport then acitave this.props.handler and set it to false } } } class Product extends React.Component { render() { return <BackButton onClick = {this.props.handler(true)}/ > } }Lo que entiendo es que al cargar una página, desea:
Entonces parece que necesita guardar algún tipo de ID de página con la ubicación que está guardando/cargando. Este identificador único puede ser claramente la URL.
Luego, puede usar una versión similar de su código:
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}`); } }, []);