如何访问在 URL 中的 JavaScript 变量

当我们需要从前端页面获取数据并传输到后端时，常见的方法是通过表单提交或使用 AJAX 发送 HTTP 请求。但是，在某些情况下，我们可能需要将数据存储在 URL 中，以便用户可以轻松地分享该 URL 或以其他方式将其保存。在这种情况下，我们可以使用 JavaScript 变量来存储数据，并将其添加到 URL 中。

在 URL 中添加 JavaScript 变量

要在 URL 中添加 JavaScript 变量，我们可以使用 URLSearchParams API。这个 API 允许我们构造查询字符串，并将其附加到 URL 上。以下是一个示例：

const params = new URLSearchParams();

params.append('username', 'John');
params.append('age', 30);

const url = `http://example.com/?${params.toString()}`;

在这个示例中，我们创建了一个名为 params 的 URLSearchParams 对象，并向其中添加了两个键值对：username 和 age。然后，我们使用 toString() 方法将 params 转换为查询字符串，并将其附加到 URL 上。

现在，如果我们将这个 URL 发送给后端，后端就可以解析查询字符串并提取其中的数据。

从 URL 中获取 JavaScript 变量

要从 URL 中获取 JavaScript 变量，我们可以使用 URLSearchParams API 的 get() 方法。这个方法允许我们根据键获取对应的值。以下是一个示例：

const params = new URLSearchParams(window.location.search);

const username = params.get('username');
const age = params.get('age');

console.log(username); // 'John'
console.log(age); // '30'

在这个示例中，我们首先创建了一个名为 params 的 URLSearchParams 对象，并将其初始化为 window.location.search。这样，params 将包含 URL 中的查询字符串。然后，我们使用 get() 方法分别获取 username 和 age 的值。

注意事项

需要注意的是，URLSearchParams API 并不支持所有浏览器。如果您需要兼容旧版浏览器，请考虑使用其他方法来处理查询字符串。

此外，由于 URL 中的 JavaScript 变量是公开的，因此请确保不要存储敏感数据，如密码或信用卡信息。

结论

使用 JavaScript 变量可以方便地将数据添加到 URL 中，并从 URL 中提取数据。但是，我们需要注意兼容性和安全性方面的问题。希望本文对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13414