Question

我首先想说的是我对HTML很新，所以请原谅糟糕的代码结构和缺乏知识。

我创建了一个表单，其中用户填写了一些关于他们日常练习的详细信息，日志条目的名称，练习名称等等。然后我使用一些java函数来存储这些值，然后单独使用页面我想以文本框格式将这些值显示给用户。我的问题是我想在1个文本框中显示所有值，但我不知道如何以这种格式读出它们。

这是我创建并保存用户输入的HTML：

 <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Add New Log</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="CSS/New Log.css">
  <script src="JavaScript/New Log.js"></script>

</head>

<body>
<script type = "text/JavaScript">
function save() {
    // save values into localStorage
    localStorage['input1'] = document.getElementById('eName').value;
    localStorage['input2'] = document.getElementById('exercise').value;
    localStorage['input3'] = document.getElementById('date').value;
    localStorage['input4'] = document.getElementById('sTime').value;
    localStorage['input5'] = document.getElementById('eTime').value; 
    localStorage['input6'] = document.getElementById('cal').value;  
    alert("Log Entry Saved");
};


</script>

<h1> Add New Log </h1>

<form id="contact-form">
        <label for="name">Log entry name:</label>
        <input type="text" id = "eName"  value="" placeholder="Run at the 
park"/>
       <label for="email">Name of exercise:</label>
        <input type="name" id = "exercise"  value="" placeholder="Jogging"  />
        <div id="line">
         <label> ------------------------------ <span class="required">
</span></label>
         </div>
         <div id="detail">
        <label for="telephone">Date: </label>
        <input type="number" id = "date" value="" />
        <label for="telephone">Start Time: </label>
        <input type="number" id = "sTime"  value="" />
        <label for="telephone">End Time: </label>
        <input type="number" id = "eTime" value="" />
        <label for="telephone">Calories Lost: </label>
        <input type="number" id = "cal"  value="" />
       </div>


</form>

<li><a href="Fitness Log.html" onclick ="save()"> Add New Log</a></li>




</body>


</html>

此处单击添加新日志按钮时，将存储用户信息。

这是我想在1个文本框中加载信息的地方：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Health and Fitness</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="CSS/Log.css">


</head>

<body>
<script>


window.onload = function(){
      var val = localStorage.getItem('input1'); // or localStorage.value


      if(val == null)
          val = "First try";

     document.getElementById("textbox").value = val;

}
</script>


<h1> Fitness Log </h1>
<p> Fitness Log keeps track of the exercise you complete and saves it to 
your account.</p> 

<div>
<ul>
    <li><a href="New Log.html"> Add Log</a></li>
    <li><a href="#"> Delete All</a></li>
</ul>
</div>


<input type="text" id = "textbox" value = "change"> </input>
<input type="text" id = "textbox2" value = "change"> </input>

</body>
<script>

</html>

我知道我可以在单独的文本框中加载用户的所有这些信息，但我想加载所有信息，而不仅仅是输入文本框中的input1。我不知道这是否是最佳方式，如果有更好的方式请告诉我。

Answer 1

正如您已经提到的，您只是获得input1值并显示它。如果要在单个文本框中显示所有值，则需要从localStorage中单独获取它们，然后将它们连接在一起并将最终值设置为textbox。

var val1 = localStorage.getItem('input1');
var val2 = localStorage.getItem('input1');
var val3 = localStorage.getItem('input1');
...

以类似的方式获取所有值。我假设所有这些都是string。在这种情况下，您只需concat即可获得最终值。像：

var finalValue = val1.concat(val2).concat(val3);

然后

document.getElementById("textbox").value = finalValue;

这应该会给你想要的结果。虽然我不知道你的用例，但这似乎并不是一个好的做事方式。相反，如果您希望保存所有这些数据，您可能希望将整个数据分成几个属性中的单个对象，最后您可以将整个obj推送到localStorage，如：

<script>
window.onload = function(){

var objToSave = {};

}

function save(){
    objToSave.data1 = document.getElementById('eName').value;
    objToSave.data2 = document.getElementById('exercise').value;
    ....
localStorage.setItem('objToSave', JSON.stringify(objToSave));  //you need to stringify object before pushing to localStorage

}

</script>

当你得到它时，请执行以下操作：

var myDataFromLS = JSON.parse(localStorage.getItem('objToSave'));

现在，此对象包含所有输入数据，但采用地图种类结构。所以你再次需要拉出不同的属性并像上面解释的那样绑定它们。这里的好处是你可以在对象中运行一个循环并立即连接所有值。

var finalValue= "";
for( var data in myDataFromLS ){
 finalValue= joinedString.concat(myDataFromLS[data]);
}

现在您可以使用以下方法将此字符串绑定到文本框：

document.getElementById("textbox").value = finalValue;

这将帮助您保持代码的紧凑。

P.S。这只是基于您当前的实现。当然，有更好的做事方式。

Answer 2

如果您不打算添加更多字段，那么您的方法没有任何问题。您将遇到的唯一问题是，您添加的字段越多，您在多个地方所做的更改就越多。所以一个更聪明的方法可能是使用 jQuery来获取所有表单值或使用p lain javascript来获取所有表单值，两者都运行良好。如果您计划使用jQuery或Java Grab form values with jQuery or JavaScript

，可以查看此SO答案

然后，您可以保存在localstorage中。

Answer 3

您可以使用Object.entries()，+=运算符将localStorage键和值.value连接到<input>元素

var values = document.getElementById("textbox");
for (let [key, prop] of Object.entries(localStorage)) {
  values.value += ` ${key} : ${prop} `;
};

HTML：存储用户值

3 个答案: