gpt4 book ai didi

javascript - 如何在刷新时保持页面状态?

转载 作者:行者123 更新时间:2023-11-28 03:35:59 26 4
gpt4 key购买 nike

我想制作一个在用户刷新时可以保持其状态的网页。

此站点上的多个答案建议将状态存储在浏览器的本地存储中。这很好用。有点。但是,当用户在多个选项卡中打开同一页面并刷新其中一个选项卡时,状态将从不同的选项卡恢复。不好。

另一种方法是将状态放入表单输入中。在 Firefox 中,表单输入的状态在刷新时保留,尽管有些人认为 a bug 。不幸的是,并不是每个人都使用 Firefox。

所以我尝试使用history API。这是我尝试过的:

<!DOCTYPE html>
<title>Test</title>
<input placeholder="Input state">
<script>
var input = document.getElementsByTagName("input")[0]
input.value = history.state
console.log("Loaded state", history.state)
window.onunload = function() {
history.replaceState(input.value, "")
console.log("Saved state", history.state)
}
</script>

当页面被卸载时,它使用history.replaceState()来存储状态。加载时,它读取history.state。应该可以,对吧?

嗯,它可以在 Firefox 中运行,但不能在 Chrome 中运行。在 Chrome 中,在 unload 处理程序中读取 history.state 时,返回正确的值,但刷新页面后,该值恢复为 null。不是应该保留吗?

是否可以在 Chrome 中使用 history 保留状态?还有其他好的方法可以实现这一目标吗?我知道可以将状态存储在 URL 中(使用 history.replaceState()location.hash),但它对用户可见,并且它可能会获胜如果国家很大的话,效果就不太好。还有window.name,但它泄漏到其他页面。

最佳答案

如果您可以将状态存储在 localStorage 中,并且知道不同选项卡的状态已在选项卡中更新,您是否可以不将状态存储为映射,其中键是选项卡的(生成的唯一)名称,并且该值是该选项卡的状态?

关于javascript - 如何在刷新时保持页面状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57738653/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com