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

IT技术 javascript jquery html
2021-02-22 09:25:34

我想将选定列表项的值传递到另一个页面,这意味着如果我从列表中选择 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);

我想将上面的文本值传递给我的profile.html,它有 javascript 函数profile()。所以我想在函数调用中传递这个文本,如 profile(text);我尝试在函数调用上方声明 var 文本,但仍然是它的不工作。请告诉我是否还有其他方式。

5个回答

您可以将该值作为 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)

有不同的方法可以做到

将所选项目存储在 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
2021-04-15 09:25:34

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

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

考虑到:

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

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

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

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

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

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

如何将javascript对象从一个页面传递到另一个页面

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

localStorage、sessionStorage、session 和 cookie 有什么区别?

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

这会将页面重定向到profile.htmlparams as?something=textishere

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

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

location.search

您可以使用localStorage events在网页之间传递值,如本演示所示:

http://html5demos.com/storage-events