Question

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

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

另一种方法是将状态放入表单输入中。在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中，当在history.state处理程序中读取unload时，将返回正确的值，但是刷新页面后，该值将恢复为null。不是应该保留吗？

是否可以在Chrome中使用history来保留状态？还有其他好的方法可以做到这一点吗？我知道可以将状态存储在URL中（使用history.replaceState()或location.hash），但是它对用户可见，如果状态很大，它可能无法很好地工作。也有window.name，但它会泄漏到其他页面。

Answer 1

如果可以将状态存储在localStorage中，并且可以知道其他选项卡的状态已在选项卡中更新，则不能将状态存储为映射，而键是选项卡的（生成的唯一）名称，并且该值是该标签的状态吗？

如何在刷新期间保持页面状态？

1 个答案: