我想將一個文本輸入字段保存到本地存儲中，然后在另一個頁面上顯示該值。html

Question

我是初學者，對於我的第一個項目，我想制作一個基於文本的游戲。 我希望玩家在一個字段中輸入他的名字，然后在接下來的頁面上顯示他的名字。 我選擇使用 localStorage 來實現這一點，因為我還不知道任何服務器端編程。 如果可能的話，我不想使用 javascript 庫。

我認為，我以正確的方式獲得了用戶的價值：

<!DOCTYPE html>
<html>
<head>

<script>

function myFunction() {
  // Gets input value
  var uName = document.getElementById("myInput").value;

  // Saves data to retrieve later
  localStorage.setItem("userName", uName);

  // Updates HTML
  updateHTML();
}
</script>
</head>

<body>

set user name: 
<input id="myInput" type="text">
<button onclick="myFunction()">Answer</button>

 </body>
</html>

第二頁如下所示：

<!DOCTYPE html>
<html>
<head>
<script>

function getName() {
  return localStorage.getItem("userName");
}

function updateHTML() {
  var uName = getName();
  document.getElementById("storedName").innerHTML = uName;
}

</script>
</head>

<body class=backgroundcomputer001>

    "Welcome back <p id="storedName"></p>

    </div>
    </body>
</html>

我不知道我做錯了什么，我已經在這個問題上花了兩天多的時間。 任何幫助表示贊賞。 （我知道我應該將 javascript 和 html 分開，但我更容易想象正在發生的事情。）

Answer 1

因此，首先不會在任何地方調用updateHTML function。 您已聲明它但尚未調用它。 您可以添加updateHTML(); 到腳本的末尾，它將被執行。 第二個問題是，即使在這種情況下，由於以下錯誤，代碼也無法顯示名稱：

未捕獲的類型錯誤：無法設置 null 的屬性“innerHTML”

這意味着在執行 function 的那一刻，文檔還沒有完全加載。 作為一種解決方案，您可以將腳本放在關閉正文標記之前。

<!DOCTYPE html>
<html>
<head>

</head>

<body class=backgroundcomputer001>
  <div>
    Welcome back <p id="storedName"></p>
  </div>
  <script>
   function getName() {
     return localStorage.getItem("userName");
   }

   function updateHTML() {
     var uName = getName();
     document.getElementById("storedName").innerHTML = uName;
   }

   updateHTML();

  </script>
</body>

Answer 2

而不是使用 function updateHTML(); 您需要重定向到以下 HTML 並且您必須使用此指令執行此操作：

window.location.href = "index.html"; // name of your html that presents the username

對於顯示用戶名的 HTML，添加一個 function，它在完成重新加載 HTML 時執行，如下所示：

<script>
    window.onload=function() { //This function is executed when loading the page
        var uName = localStorage.getItem("userName");
        document.getElementById("storedName").innerHTML = uName;
    }
</script>

並在歡迎詞旁邊顯示名稱和這個，你可以這樣做

<p>"Welcome back <span id="storedName"> </span></p>

對不起我的英語，但我希望我已經解決了你的問題。 隔離快樂：D

我想將一個文本輸入字段保存到本地存儲中，然后在另一個頁面上顯示該值。html

問題描述

2 個解決方案

解決方案1
0 已采納 2020-05-24 17:12:24

解決方案2
0 2020-05-24 17:31:16

我想將一個文本輸入字段保存到本地存儲中，然后在另一個頁面上顯示該值。html

問題描述

2 個解決方案

解決方案1 0 已采納 2020-05-24 17:12:24

解決方案2 0 2020-05-24 17:31:16

解決方案1
0 已采納 2020-05-24 17:12:24

解決方案2
0 2020-05-24 17:31:16