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

Question

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

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

另一种方法是将状态放入表单输入中。 在Firefox中，表单输入的状态会在刷新期间保留，尽管有些人认为它是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 ，但它泄漏到其他页面。

Answer 1

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

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

问题描述

1 个解决方案

解决方案1
0 2019-08-31 15:34:36

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

问题描述

1 个解决方案

解决方案1 0 2019-08-31 15:34:36

解决方案1
0 2019-08-31 15:34:36