Javascript：是否只有一页的 sessionStorage 或 localStorage 之类的东西？答案

【问题标题】：Javascript: Is there something like sessionStorage or localStorage for one page only?Javascript：是否只有一页的 sessionStorage 或 localStorage 之类的东西？
【发布时间】：2020-02-29 13:58:59
【问题描述】：

我目前正在使用 ASP.NET MVC 和 HTML/JavaScript 开发一个网站。在这个网站上，我有一个数据表单页面，其中包含多个文本字段、组合框、日期时间选择器和其他控件（其中一些来自 jQuery UI 扩展），用户可以在其中输入数据。

现在我的要求是刷新页面时输入的数据不应该丢失，因为当前刷新页面时表单中的所有字段都变为空白。

我已经实现了一个解决方案，它将用户输入的所有内容存储在 sessionStorage 中，并在用户刷新页面时恢复它。但是，sessionStorage 不适合此目的，因为当用户导航到网站上完全不同的页面，然后导航回包含数据表单的页面时，数据甚至会被恢复。

有什么方法可以通过 JavaScript 存储数据，其工作方式与 sessionStorage（或 localStorage）类似，但在用户导航到不同页面时会自动清除？如果没有，是否至少有一种简单的方法可以在用户导航到另一个页面时手动清除 sessionStorage？

【问题讨论】：

只需将其保存在会话/本地存储中具有页面名称的键下？
@VLAZ 但是这样当用户导航到我网站上的另一个页面然后返回到带有数据表单的页面时它仍然会恢复，不是吗？到目前为止，我想到的唯一解决方案是清除我网站所有其他页面上的 sessionStorage，但这似乎是一个愚蠢的解决方案。
啊，我明白你的意思了。
我认为您可能会选择不同的方法，您可以在用户写入值时将值保存到后台（服务器端）的临时行中。 Ajax 调用将起作用。当页面刷新发生时，您可以检查是否有未完成的表单（在服务器上）。导航到不同的页面也可以使用 ajax 来处理。 ajax调用可以删除服务器端不完整的行。

标签： javascript jquery asp.net-mvc jquery-ui

【解决方案1】：

此函数将在 url 更改时调用。

$(window).bind('hashchange', function() {
 // reset the data
});

【讨论】：

谢谢！不幸的是，当我导航到网站上的另一个页面时，似乎没有调用该函数/事件。你知道可能是什么问题吗？我在控制台中看不到任何错误，如果我将该代码直接放在我的 JavaScript 代码中或在 $(document).ready 中运行它，也没有什么不同。当前所有浏览器都支持此功能，还是存在兼容性问题？
我认为这可以帮助你。 window.onbeforeunload = function (e) { //写你的代码 };

【解决方案2】：

您可以在布局页面中处理文档就绪事件，然后您可以通过页面 URL 进行检查。

<script>

    $(document).ready(function () {
        if (window.location.href != 'your url') {
            // reset all data
        }
        else {
            // restore data from local storage
        }
    });
</script>

【讨论】：

谢谢，这很完美，不需要手动添加代码来单独清除网站上的每个页面！