如何在javascript中的不同html页面之间传递变量值

Posted 2023-03-05

技术标签:

【中文标题】如何在javascript中的不同html页面之间传递变量值【英文标题】：How to pass variable value between different html pages in javascript 【发布时间】：2014-06-06 11:38:47 【问题描述】：

我想将选定的 列表项 的值传递到另一个页面，这意味着如果我从列表中选择 abc，那么这个 abc 值将传递到下一个 html 表单，它应该打开该配置文件仅页面。有什么方法可以在不同的 html 页面中使用此变量。

$('.ui-li-icon li').click(function() 
    var index = $(this).index();
    text = $(this).text();
    alert('Index is: ' + index + ' and text is ' + text);

我想将上述文本值传递给具有 javascript 函数 profile() 的 profile.html。所以我想在函数调用中传递此文本，例如profile(text);我尝试在函数调用上方声明 var text 但仍然无法正常工作。请告诉我是否有其他方法。

【问题讨论】：

你在哪里使用 profile(text) ?? 看看developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage 在另一个 profile.html 中我已经包含了这个 profile.js 并且在 profile.js 中它包含函数 profile(text); Persist variables between page loads的可能重复 【参考方案1】：

有不同的方法来做到这一点

将所选项目存储在 cookie 中

 // Store it in the cookies
 document.cookie="selected=john"

// Get it in the profile.html
var cookie = document.cookie;

将所选项目存储在本地存储中

// Store it in the local storage
localStorage.setItem('selected', 'john');

// Get it from the local storage
var selected = localStorage.getItem('selected');

使用查询参数（推荐）

您可以在profile.html?selected=john的查询参数中传递所选项目。我推荐这种方法。您可以通过location.search阅读所选项目

【讨论】：

也可以使用document.referrer获取查询参数from the previous page。【参考方案2】：

HTML / HTTP 是无状态的，这意味着您在前一页所做/看到的内容与当前页面完全断开。

1) - 简单地使用前端存储，它配备任何浏览器（Cookie、会话存储、本地存储）并将价值放在一个页面中并在其他页面中获取价值。

考虑到：

Cookie 将数据保存到您确定的时间，

会话存储会保存数据，直到浏览器默认选项卡关闭

本地存储会保存数据，直到浏览器完全关闭并在选项卡（页面）之间共享此数据。它存储的数据没有过期日期，并且只能通过 JavaScript 或清除浏览器缓存/本地存储的数据来清除 - 与 cookie 过期不同。

2) – 将其保存为请求参数的第二种方法 - 在通过 Ajax 渲染函数生成元素时为其添加属性一条链接另一个链接

-> 并在单击此元素后构造“ URL / ? action=getAll & element=product & id=1212 “在第二个页面中，你可以解析这个 URL 并使用适当的参数调用适当的 Ajax。

这些附加信息可能也会有帮助

How to pass javascript object from one page to other

关于“客户端存储解决方案”的更多信息

What is the difference between localStorage, sessionStorage, session and cookies?

【讨论】：

【参考方案3】：

您可以将值作为 url 片段传递。

在你的点击功能中，打开'/profile.html#'+text

在您的 profile.html 中获取 url 片段。

示例代码：

导航到 profile.html

window.location.href = '<path to profile.html>' + '#' + text;

在profile()中，要获取参数，使用

var text = window.location.hash.substring(1)

【讨论】：

【参考方案4】：

<form action="profile.html" method="GET">
   <input type="text" id="something" name="something">
   <input type="submit" value="Send" name="submit" id="submit">
</form>

这会将页面重定向到profile.html，参数为?something=textishere

这将是形成的网址：/profile.html?something=textishere&submit=Send"

然后您可以使用此页面获取参数