如何将多个前置日期存储到localStorage？

Question

I am trying to store the current time and date in a table. Currently, on a page load, my code changes the date to reflect the current time.

My code looks like this:

function currentDate() {
  var d = new Date();
  return d.toString();
}
window.onload = function() {
   localStorage.setItem("date", currentDate());
   $('#current-location').prepend('<tr<td>'+localStorage.getItem("date")+'</td>');
}

I tried console.log(localStorage) , so I know that one date is being saved there. However, I want to store the date when the page is reloaded (like load the page a second time and 2 dates appear, etc) Do I need an array for this? If so, how would I add array contents to a table?

Answer 1

Yes, you could use an array for that, and just keep pushing dates to the array, like this

function currentDate() {
  var d = new Date();
  return d.toString();
}

var arr = JSON.parse(localStorage.getItem("date") || "[]");

arr.push(currentDate())

localStorage.setItem("date", JSON.stringify(arr));

arr.forEach(function(item) {
  $('#current-location').prepend('<tr><td>' + item + '</td></tr>');
});

FIDDLE

Answer 2

So, I'd add an object as a JSON and save it's stringified version into localStorage. As a proof of concept you can use something like this:

1) Initialize the object in localStorage:

var listOfDates = {
  dates: []
};
localStorage.setItem('myDates', JSON.stringify(listOfDates));

Depending of your needs, you might want to put this in an "if(!localStorage.getItem('myDates'))"

2) Make a function that reads the storage, parses the JSON, adds an item to the dates array, and saves back to localStorage:

addDateRowToTable = function() {

  var listOfDates = JSON.parse(localStorage.getItem('myDates'));
  listOfDates.dates.push(currentDate());
  localStorage.setItem('myDates', JSON.stringify(listOfDates));

  for(var i=0; i< listOfDates.dates.length; i++) {
   // do whatever you need to
  }
}

I hope this helps.