Ajax/JQuery: Динамически Обновление значения текстового окна без перезагрузки страницы

Question

Я хочу, чтобы получить текущее значение диапазона элемента

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

data-value важно здесь. Я могу восстановить это значение, нажав кнопку. Для этого генерируется случайное значение.

На другой странице мне нужно отобразить это значение в текстовом поле при нажатии на кнопку выбора.

Открываю две вкладки в браузере по одному для двух веб-страниц. I Регенерируйте это значение данных диапазона, нажав кнопку. Затем, не обновляя другую страницу, я нажимаю значение параметра, соответствующее этому значению на другой странице, чтобы отобразить значение в текстовом поле.

Я написал функцию document.ready() для отображения значения соответствия в соответствии с значением параметра на второй странице.

Но если я обновляю значение диапазона на первой странице и нажимаю на другую страницу, я не могу получить вновь созданное значение. Он показывает ранее сгенерированное значение.

Hoe Я могу использовать JQuery/ Ajax, чтобы получить это обновление динамически без перезагрузки второй страницы?

Answer 1

Вам не нужно будет использовать ajax или любую обработку на стороне сервера, если вы сохраните значение в LocalStorage или SessionStorage для страницы/сайта. Вы можете использовать один из этих объектов Storage для хранения значения, чтобы он был доступен для других страниц на сайте, а также для создания прослушивателей событий при изменении хранилища, чтобы страница могла выполнять некоторые действия всякий раз, когда значение в хранилище изменяется с другой страницы.

Что вы хотите сделать, это:

1. Когда кнопка регенерировать щелкнули страницаА, в дополнение к тому, что вы уже делаете, магазин/обновить новое значение в LocalStorage (собирается использовать LocalStorage отсюда, но SessionStorage может быть тем, что вы хотите).

2. На странице B введите значение поля ввода в значение, хранящееся в объекте хранения, и добавьте прослушиватель событий в LocalStorage, который запускается при изменении значения (которое может быть на странице A или стр. B) и обновляет входное значение.

часть 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; 
    } 
});