Ajax/JQuery：动态更新文本框值而不重新加载页面答案

【问题标题】：Ajax/ JQuery : Dynamically Update a text box value without reloading a pageAjax/JQuery：动态更新文本框值而不重新加载页面
【发布时间】：2023-03-14 21:30:01
【问题描述】：

我想获取一个 span 元素的当前值

<span class="accessTokenDisplaySand keyValues" id="sandAccess" data-value="7becc08d7f98bbaa9cb664f6d5731efb">7becc08d7f98bbaa9cb664f6d5731efb</span>

data-value 在这里很重要。我可以通过单击按钮重新生成此值。为此会生成一个随机值。

在另一个页面上，当单击选择框的选项时，我需要在文本框中显示此值。

我在浏览器中打开两个选项卡，每个选项卡用于两个网页。我通过单击按钮重新生成跨度的此数据值。然后在不刷新其他页面的情况下单击其他页面中与该值对应的选项值以在文本框中显示该值。

我写了document.ready()函数，根据第二页的option值显示对应的值。

但是，如果我在第一页重新生成跨度值并单击另一页，我将无法获取新生成的值。它显示了先前生成的值。

我可以使用JQuery/ Ajax 来动态更新此内容而无需重新加载第二页吗？

【问题讨论】：

标签： jquery ajax

【解决方案1】：

如果您将值存储在页面/站点的 LocalStorage 或 SessionStorage 中，则不需要使用 ajax 或任何服务器端处理。您可以使用这些Storage 对象之一来存储值，以便站点上的其他页面可以使用它，并在存储更改时创建事件侦听器，以便页面可以在存储中的值时执行某些操作从不同的页面更改。

你想做的是：

当在 pageA 上单击重新生成按钮时，除了您已经在做的任何事情之外，在 LocalStorage 中存储/更新新值（从这里开始使用 LocalStorage，但 SessionStorage 可能成为你想要的）。
在 pageB 上，使用存储对象中存储的值填充输入字段值，并向 LocalStorage 添加一个事件侦听器，该事件侦听器在值更改时触发（可能在 pageA 或 pageB 上）并更新输入值。

第 1 部分：

// put inside the regenerate functionality

 localStorage.setItem('sand-access-key', new_key_value);

第 2 部分：

// From pageB:

var key_field = document.getElementById("sand_key_input");

window.addEventListener('storage', function(e) {  
    if(e.key == 'sand-access-key') {
         key_field.val = e.newValue;
    }
});

【讨论】：