如何在 Web 应用程序中跨页面重新加载保留变量？

如何在页面加载之间保留变量

跨页面重新加载跟踪用户操作对于增强 Web 应用程序中的用户体验至关重要。但是，由于 HTTP 的无状态性质，此任务可能具有挑战性。

尝试和错误

尝试捕获表单提交事件并随后取消隐藏隐藏内容失败字段被报道。 JavaScript 代码使用全局变量（单击）来存储提交状态，但它无法在页面刷新时保留其值。

解决方案

解决此问题，有以下几种方法可以实现：

1.查询字符串

使用 GET 方法提交表单时，URL 将使用包含参数值对的查询字符串进行更新。这允许您将表单中的输入字段设置为特定值。例如，可以添加隐藏字段：

<form method="GET">
<input type="hidden" name="clicked" value="true" />
<input type="submit" />
</form>

在后续页面加载时，您可以使用 JavaScript 解析查询字符串并检查是否有任何传递的值：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
    var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var clicked = getParameterByName('clicked');

2。 Web 存储

HTML5 引入了 Web 存储，它提供了一个 API，用于跨页面加载在浏览器中保存数据。它提供了两个选项：sessionStorage 和 localStorage。

sessionStorage:

• 数据仅在当前浏览会话期间保留。
• 适合存储临时数据，例如点击的数据

单击按钮时设置 sessionStorage 的代码：

$('input[type="submit"][value="Search"]').click(function() {
    sessionStorage.setItem('clicked', 'true');
});

检查页面加载时是否设置 sessionStorage 的代码：

var clicked = sessionStorage.getItem('clicked');

本地存储：

• 数据无限期地持续存在（除非用户手动清除）。
• 对于在单个浏览会话之外存储数据很有用。

单击按钮时设置 localStorage 的代码：

$('input[type="submit"][value="Search"]').click(function() {
    localStorage.setItem('clicked', 'true');
});

检查页面是否设置了 localStorage 的代码负载：

var clicked = localStorage.getItem('clicked');

3。 Cookie

Cookie 提供了另一种持久数据存储机制。与 Web Storage 不同，cookie 主要设计用于服务器端通信，但它们也可用于客户端数据保留。

jQuery 简化了 cookie 处理：

$('input[type="submit"][value="Search"]').click(function() {
    $.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});

要读取的代码页面加载时的 cookie：

var clicked = $.cookie('clicked');

要删除 cookie，请调用 $.cookie('clicked', null）。

4。 window.name

虽然有点不传统，但 window.name 属性可用于跨页面刷新存储数据：

window.name = "my value";

可以存储字符串或序列化对象：

window.name = JSON.stringify({ clicked: true });

但是，这种方法有局限性。它可以跨选项卡和域访问，但只能在同一浏览会话中进行。通常不建议保存关键数据。

以上是如何在 Web 应用程序中跨页面重新加载保留变量？的详细内容。更多信息请关注PHP中文网其他相关文章！