在NextJS中返回上一页时(使用浏览器的后退按钮时)如何恢复过去的状态?还是一般来说,使用浏览器的前进和后退按钮在前进和后退页面之间移动时如何恢复状态?
我有一个项目,其中我在网格中显示许多游戏截图(“游戏截图”类似于Pinterest引脚)。为了避免从Sanity获取数据时的等待时间过长,我不会一次全部获取数据,然后将其存储在this.props
中,而是分批存储,这就是为什么将它们存储在this.state
中的原因
这是我的情况:
/game
页this.state.gameshots
的状态并呈现出来/game?gameshotIndex=14
(顺便说一下,这是真实的URL,但在URL栏中显示/gameshot/d6fg8a456g
)this.props.url.query.gameshotIndex && <Modal> ... </Modal>
/tag/d65g4d56gff4g6jfg
/game
的状态丢失了,因此该页面不需要this.state.gameshots
来显示模式。如果将它们立即加载并存储在this.props.gameshots
中,则可以正常工作-但是,即使有100000000个游戏快照,您也必须一次加载所有,这意味着庞大的TTFB和缓慢的页面加载。所以我的问题是:如何在浏览器中使用后退和前进按钮浏览页面而不丢失状态?
答案 0 :(得分:0)
也许您可以使用localStorage.setItem('images', this.state.gameshots)
并存储所需的内容。
当用户返回时,您可以使用localStorage.getItem('images')
获取此数据并显示给用户。这样可以避免再次请求获取图像。
希望能解决您的问题。 :D