我如何使用document.getElementById（）从一个网页在另一个网页上使用javascript显示用户输入？

Question

我试图将用户输入记录在listing.html中，以便将其显示在我的主页index.html上。为此，我使用了我编写的函数，即submitValue()和嵌套函数addListing()。

listing.html：

<h3>
Timer: <input id="myTimer">
<p>
Question: <input id="myQuestion"> 
<p>
Bounty: <input id="myBounty">
</h3>

<button onclick="submitValue()"> Submit </button> 
<script src="index.js"></script>

submitValue()位于index.js中（我最初计划在其中编写所有JavaScript代码）。

function submitValue() {
    var t = document.getElementById("myTimer").value;
    var q  = document.getElementById("myQuestion").value;
    var b = document.getElementById("myBounty").value;
    location.href='index.html';
    addListing('#f38181', t, q, b);
}

我遇到的问题是，函数document.getElementById()自动指向主页（在我的情况下为index.html）。 div "myTimer"，"myQuestion"和"myBounty"位于listing.html上。出于我的目的，这很不方便，因为我再次尝试在index.html上显示这些div的用户输入（值）。我读过几篇论坛文章，其中隐约暗示使用AJAX和JQuery，以及document.cookie。只要可行，我愿意尝试任何方法。如果您已经完成了所有这些序言，那么我的问题如下：如何解决这个令人讨厌的问题？

Answer 1

如果您调用另一个页面（在本例中为index.html），则从listing.html检索到的数据将不会保留。为了获得结果，您必须保留从字段中获取的数据。要保留数据，可以使用服务器中的db或浏览器中的本地存储。

在Chrome中，您可以尝试这个。

function submitValue() {
    var t = document.getElementById("myTimer").value;
    var q  = document.getElementById("myQuestion").value;
    var b = document.getElementById("myBounty").value;
    localStorage.setItem("#f38181",{ t, q, b})
    location.href='index.html';
}

并且在index.html中像这样检索数据

var listingdata = localStorage.getItem("#f38181")
console.log(listingdata)