javascript - 将时间戳保存在 "localStorage"中并保留这些标记

Question

我有一个点标记应用程序。工作原理如下:每次单击按钮我都会保存一个时间戳，您只能调用四次(这已经完成了)。我需要将四个时间戳保存在“localStorage”中，并保留这些标记而不过期，并在前一天制作并显示新标记低于前一天的标记。

function getTime() {
  document.querySelector("button").setAttribute("onclick", "popupAlert()");

  var storedNames = JSON.parse(localStorage.getItem("names"));
  var data = new Date();
  var full_time = data.getHours() + ":" + data.getMinutes() + ":" +
    data.getSeconds();
  var completeDate = full_time;

  localStorage.setItem('completeDate', completeDate);

  document.getElementById("markTimes").insertAdjacentHTML('beforeend',
    '<span class="dataTime" id="dataTimeStl">' + completeDate + ' </span>');
  var qtd = document.getElementsByClassName("dataTime").length;

  if (qtd < 4) {
    setTimeout(function() {
      document.querySelector("button").setAttribute("onclick", "getTime()");
    }, 3000);
  } else {
    document.querySelector("button").disabled = true;
    console.log("fim");
  }
}

<button onclick="getTime()">Marcar</button>
<div id="markTimes"></div>

Answer 1

您需要存储一个数组:

所以代替你的线路

localStorage.setItem('completeDate', completeDate);

执行以下操作:

const savedDates = localStorage.getItem('completeDate')

let dates
if (savedDates) {
  dates = JSON.parse(savedDates)

  dates.push(completeDate)
} else {
  dates = [completeDate]
}

localStorage.setItem('completeDate', JSON.stringify(dates))

它将在数组中添加项目并将其保存回来。不幸的是，您需要解析、修改数据并将数据字符串化回本地存储