无法将localStorage数据追加到指定div，寻求技术解决方法

问题描述 #

我正在开发一款简易日记记录应用，用HTML、CSS和JS实现，功能包括：用户输入文本提交，提交时附带当前时间戳并存储到localStorage；点击按钮取出localStorage数据展示到id为data-viz的div中，但该div始终无内容显示。相关代码如下：

HTML代码 #

<div class="background-journal">
    <button class="button-journal" onclick="openPopup()" id="entrybtn">New Entry</button>
    <br><br><br><br><br><br><br>
    <button class="show-journal" onclick="recallEntries()" id="showbtn">View Previous Entries</button>
    <div class="journal-visual" id="data-viz">
    </div>
<div id="popup" class="popup">
<form id="form" class="form">
    <br>
    <label for="journal-entry">何を勉強していますか？</label><br><br>
    <textarea class="add-entry" id="journal-entry" rows="6" cols="150"></textarea><br>
    <button type="submit" onclick="submitJournalEntry()">Submit</button>
    <button type="button" onclick="closePopup()">Close</button>
    </form>
</div>

CSS代码 #

.background-journal{
  position:absolute; 
  top: 35%; 
  left: 9.6%; 
  background-color:rgba(255,255,255,0); 
  z-index:1001;
  width: 80%;
  height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

.button-journal {
  background-color: #fff;
  border: none;
  color: #000;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 90%;
  height: 100px;
  left: 4.5%;
  position: absolute;
  box-shadow: 3px 5px #888888;
}

.show-journal{
  background-color: #fff;
  border: none;
  color: #000;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 90%;
  height: 100px;
  left: 4.5%;
  position: absolute;
  box-shadow: 3px 5px #888888;
}

.journal-visual{
  background-color: #fff; 
  z-index:1003;
  width: 70%;
  height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: relative;
  color: #000;
  text-align: center;
}

.button-popup-journal{
  position: relative;
}

.popup {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 200px;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  box-shadow: 3px 5px #000;
}

.popup form{
  margin: auto;
}

.add-entry{
  margin: auto;
  overflow: auto;
  position:inherit;
  left: 5%;
}

.background-journal label{
  color: white;
  opacity: 70%;
}

JS代码 #

// Journal Function

function openPopup() {
  document.getElementById("popup").style.display = "block";
  document.getElementById("entrybtn").style.display = "none";
  document.getElementById("showbtn").style.display = "none";
}

function closePopup() {
  document.getElementById("popup").style.display = "none";
  document.getElementById("entrybtn").style.display = "block";
  document.getElementById("showbtn").style.display = "block";
}

function submitJournalEntry() {
  var journalEntry = document.getElementById("journal-entry").value;

var date = new Date();
var timestamp = date.toString();

localStorage.setItem(timestamp, journalEntry);
  
  closePopup();
}

function recallEntries() {
  document.getElementById("entrybtn").style.display = "none";
  document.getElementById("showbtn").style.display = "none";
  document.getElementById("data-viz").style.display = "block";
  var keys = Object.keys(localStorage);

  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    var journalEntry = localStorage.getItem(key);
    var viz = document.getElementById('data-viz');
    div.innerHTML = '<p><strong>' + key + '</strong>: ' + journalEntry + '</p>';
    document.body.appendChild(viz);
}
}

问题原因 #

1. 未定义变量div：在recallEntries函数中，尝试给div.innerHTML赋值，但div从未被定义，应该使用已经获取到的viz变量。
2. innerHTML覆盖问题：每次循环使用=赋值会覆盖之前的内容，最终只会显示最后一条记录，应该用+=追加内容。
3. 重复获取DOM元素：循环内每次都调用document.getElementById('data-viz')，效率低且没必要，应该在循环外提前获取。
4. 表单提交默认行为未阻止：点击Submit按钮时，表单会触发默认的页面刷新，导致刚存入localStorage的数据可能还没展示就被页面重置，同时submitJournalEntry执行后页面刷新，状态丢失。

解决方案 #

修正步骤： #

• 在submitJournalEntry函数中添加event.preventDefault()阻止表单默认提交行为；
• 修复recallEntries函数中的变量错误，改为使用viz操作innerHTML；
• 改用innerHTML +=追加内容，避免覆盖；
• 提前获取data-viz元素，避免循环内重复查询；
• 展示前清空data-viz的内容，避免多次点击按钮时内容重复叠加。

修正后的JS代码 #

// Journal Function

function openPopup() {
  document.getElementById("popup").style.display = "block";
  document.getElementById("entrybtn").style.display = "none";
  document.getElementById("showbtn").style.display = "none";
}

function closePopup() {
  document.getElementById("popup").style.display = "none";
  document.getElementById("entrybtn").style.display = "block";
  document.getElementById("showbtn").style.display = "block";
}

function submitJournalEntry(event) {
  // 阻止表单默认提交刷新行为
  event.preventDefault();
  var journalEntry = document.getElementById("journal-entry").value;

  var date = new Date();
  var timestamp = date.toString();

  localStorage.setItem(timestamp, journalEntry);
  
  closePopup();
  // 清空文本框内容
  document.getElementById("journal-entry").value = "";
}

function recallEntries() {
  document.getElementById("entrybtn").style.display = "none";
  document.getElementById("showbtn").style.display = "none";
  var viz = document.getElementById('data-viz');
  viz.style.display = "block";
  // 清空之前的内容，避免重复叠加
  viz.innerHTML = "";
  var keys = Object.keys(localStorage);

  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    var journalEntry = localStorage.getItem(key);
    // 追加内容而不是覆盖
    viz.innerHTML += '<p><strong>' + key + '</strong>: ' + journalEntry + '</p>';
  }
}

额外优化建议 #

• 可以对localStorage的key进行排序，让日记按时间顺序展示；
• 添加删除单条或所有日记的功能；
• 对输入内容做简单校验，避免空内容存入。

内容的提问来源于stack exchange，提问作者kenshi