Question

我想获取span元素的当前值

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

data-value在这里很重要。我可以使用单击按钮重新生成此值。为此生成随机值。

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

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

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

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

Hoe我可以使用JQuery/ Ajax动态更新，而无需重新加载第二页？

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

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

1 个答案: