Ajax/ JQuery : Dynamically Update a text box value without reloading a page -

i want current value of span element

<span class="accesstokendisplaysand keyvalues" id="sandaccess" data-value="7becc08d7f98bbaa9cb664f6d5731efb">7becc08d7f98bbaa9cb664f6d5731efb</span> 

the data-value important here. can regenerate value using button click. random value generated that.

on other page need display value in text box when option of select box clicked.

i open 2 tabs in browser 1 each 2 web pages. regenerate data-value of span clicking button. without refreshing other page click option value corresponding value in other page display value in text box.

i have written document.ready() function display corresponsing value according option value in second page.

but if regenerate span value in first page , click on other page cannot newly generated value. shows generated value.

hoe can use jquery/ ajax updated dynamically without reloading second page?

you wouldn't need use ajax or server-side handling if store value in localstorage or sessionstorage page/site. can use 1 of these storage objects store value available other pages on site create event listeners when storage changes page can perform action whenever value in storage changed different page.

what want is:

1. when regenerate button clicked on pagea, in addition whatever doing, store/update new value in localstorage (going use localstorage here on, sessionstorage may want).

2. on pageb, populate input field value value stored in storage object , add event listener localstorage triggers when value changes (which on pagea or pageb) , updates input value.

part 1:

// put inside regenerate functionality   localstorage.setitem('sand-access-key', new_key_value); 

part 2:

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