Каков современный простой способ передачи данных с одной страницы на другую с помощью JavaScript?

Question

Мне нужно передать данные из одного HTML (source.html) в другой HTML (destination.html) и назначить эти переданные данные атрибуту value в теге <input> на странице destination.html, используя современные методы javascript.

Вот мой function @ source.html.

function sentData(){
  var send = "Send Me"
  }

Вот мой <input> тег @ destination.html.

<input id="sendedData" type="Text" value="send">

Какой самый лучший современный простой способ сделать это? Ваш совет был бы очень признателен.

Answer 1

Лучшим способом, аналогичным старому, является форма с submit (), если вы не хотите запрашивать ввод, как вы публикуете, вы можете скрыть ввод и a как триггер.

Если вам по какой-то причине нужно использовать JS, лучше всего использовать brk answerear. в основном вы называете страницу, а затем говорите им обновить ярлык или ввод на этой конкретной странице.

Answer 2

Вы можете использовать localStorage, например, так:

source.html:

function sentData() {
    var data = "Send Me";
    localStorage.setItem("data", data);
}

destination.html

document.getElementById("sendedData").value = localStorage.getItem("data") ? localStorage.getItem("data") : "Default";

В качестве альтернативы используйте параметр URL / строку запроса:

source.html:

function sendData() {
    var data = "Send Me";
    var url = new URL(window.location.href);
    url.searchParams.set("data", data);
}

destination.html

var url = new URL(window.location.href);
document.getElementById("sendedData").value = url.searchParams.get("data") ? url.searchParams.get("data") : "Default";

Answer 3

Вы можете использовать localStorage

На первой странице сохраните элемент как

localStorage.setItem('keyName','valueInString');

На второй странице получить значение

if(localStorage.getItem('keyName')){
 document.getElementById('sendedData').value = localStorage.getItem('keyName')

}