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

Question

我想得到span元素的当前值。

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

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

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

我在浏览器中打开两个选项卡，每个选项卡分别打开两个网页。我通过单击一个按钮重新生成这个span的数据值。然后，在不刷新另一页的情况下，我单击对应于另一页中该值的选项值，以在文本框中显示该值。

我编写了document.ready()函数，根据第二页中的选项值显示相应的值。

但是，如果我重新生成第一个页面中的span值并单击另一个页面，则无法获得新生成的值。它显示了以前生成的值。

我可以使用JQuery/ Ajax动态更新这个页面而不需要重新加载第二个页面？

Answer 1

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

你想要做的是：

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

第一部分：

// put inside the regenerate functionality

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

第二部分：

// 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;
    }
});