我想制作一个在用户刷新时可以保持其状态的网页。
此站点上的多个答案建议将状态存储在浏览器的本地存储中。这很好用。有点。但是，当用户在多个选项卡中打开同一页面并刷新其中一个选项卡时，状态将从不同的选项卡恢复。不好。
另一种方法是将状态放入表单输入中。在 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/