Question

在我的HTML中，我有两个页面，1是健身日志，另一个是向日志添加新条目的页面。当用户添加新条目时，它将保存到本地存储，然后在加载健身日志时，它会读取本地存储并将信息放入文本框中。这适用于1个条目，但是当我需要创建第二个不同的条目时，它会覆盖前一个条目。这是因为我假设将用户输入保存到本地存储中的方式。

这是我从表单中保存用户输入的地方：

<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['Entry Name'] = document.getElementById('eName').value;
    localStorage['Exercise'] = document.getElementById('exercise').value;
    localStorage['Date'] = document.getElementById('date').value;
    localStorage['Start Time'] = document.getElementById('sTime').value;
    localStorage['End Time'] = document.getElementById('eTime').value; 
    localStorage['Calorise Lost'] = document.getElementById('cal').value;   

    alert("Log Entry Saved");

};


</script>

<h1> Add New Log </h1>

<form id="contact-form">
        <label for="entryName">Log entry name:</label>
        <input type="text" id = "eName"  value="" placeholder="Run at the 
park"/>
        <label for="exerciseName">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="Date">Date: </label>
        <input type="date" id = "date" value="" />
         <label for="startTime">Start Time: </label>
        <input type="time" id = "sTime"  value="" />
        <label for="endTime">End Time: </label>
        <input type="time" id = "eTime" value="" />
        <label for="caloriseLost">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>

这是我以文本框的形式将本地sotrage读回给用户的地方：

<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 values = document.getElementById("Text1");
for (let [key, prop] of Object.entries(localStorage)) {
  values.value += ` ${key} : ${prop}\n `;
};


}

</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="#"onclick 
="window.localStorage.clear();window.location.reload();" > Delete All</a>
 </li>
 </ul>
 </div>



<textarea id="Text1" cols="40" rows="6"></textarea>
<textarea id="Text2" cols="40" rows="6"></textarea>

</body>


</html>

这是上述代码的输出：

我正在寻找的解决方案是进入本地存储的新条目，然后如果第一个文本框中有内容，则将下一个条目加载到文本框2中。

Answer 1

第一部分您在哪里创建日志。

首先，在启动function save()之前，您需要的是一个数组。因此，如果不存在localstorage，则从头开始创建一个。如果localstorage中至少有一条记录，则将其放入该数组中，如下所示：

if (localStorage.getItem('logs') === null) {
    var currentLogs = [];
} else {
    var currentLogs = JSON.parse(localStorage.getItem('logs'));
}

请注意，这是在保存功能

之前

现在你可以编写你的功能了。但是这次而不是一个对象，你应该把这个对象推到我们刚刚声明的数组中。

function save() {
    var currentLog = {
        log_id: localStorage.length + 1,
        entry_name: document.getElementById('eName').value,
        exercise: document.getElementById('exercise').value,
        date: document.getElementById('date').value,
        start_time: document.getElementById('sTime').value,
        end_time: document.getElementById('eTime').value,
        calorise_lost: document.getElementById('cal').value
    };
currentLogs.push(currentLog)
    // save values into localStorage
    localStorage.setItem("logs", JSON.stringify(currentLogs));
    alert("Log Entry Saved");
};

第二部分您在显示日志的位置。

在 HTML 中，而不是创建每个textarea tags只需创建一个空div

<div id="logTextarea"></div>

现在我们可以访问 DIV 并动态创建<textarea>并将数据放入

window.onload = function(){
var logTextarea = document.getElementById("logTextarea");
    var vals = JSON.parse(localStorage.getItem('logs'));
    for (var i = 0; i < vals.length; i++) {
      inputLog = document.createElement("textarea");
      inputLog.id = "logID" + vals[i]['log_id'];
      inputLog.rows = "6";

      inputLog.value = "";
      inputLog.value += "Entry Name : " + vals[i]['entry_name'] + "\n";
      inputLog.value += "Excercise : " + vals[i]['exercise'] + "\n";
      inputLog.value += "Date : " + vals[i]['date'] + "\n";
      inputLog.value += "Start Time : " + vals[i]['start_time'] + "\n";
      inputLog.value += "End Time : " + vals[i]['end_time'] + "\n";
      inputLog.value += "Calorise Lost" + vals[i]['calorise_lost'];

      logTextarea.appendChild(inputLog);
    }
}

它在我的计算机上完全按照要求运行。如果您对此有疑问，请不要犹豫。希望这有效。

HTML：存储多个用户条目

1 个答案: