How to display the new list from local storage?

Viewed 41

How do I display the new list from local storage? When the user inputs a new search, that displays fine, and get's added to the localstorage. However it doesn't show the updated list in the last requests on the website. Currently it only shows it when refreshing the website. So basically how do I re-run / re-display the new and updated list from localstorage? Here's a fiddle of the HTML

// Local Storage
function SaveDataToLocalStorage(data) {
  var a = [];
  // Parse the serialized data back into an aray of objects
  a = JSON.parse(localStorage.getItem('last-requests')) || [];
  // Push the new data (whether it be an object or anything else) onto the beggining of the array
  a.unshift(data)
  // If more than 5 requests remove (pop) last request
  if (a.length > 5) {
    a.pop()
  }
  // Re-serialize the array back into a string and store it in localStorage
  localStorage.setItem('last-requests', JSON.stringify(a));
displayLastRequests()
};
// Displays last 5 requests/searches
function displayLastRequests() {
  const lastReq = JSON.parse(localStorage.getItem('last-requests'))
  console.log(lastReq)
  // for loop request
  for (req of lastReq) {
    var clone = $($("#last-request-template").html());
    clone.appendTo(".last-requests");
    clone.find(".cityname").text(req.city_name);
    clone.find(".cityweather").text(req.weather);
    clone.find(".imgs").attr('src', req.imgurl);
    clone.find(".citytemp").text(req.city_temp + " °C");
    clone.find(".citywind").text(req.city_wind + " m/s");
  }
};
0 Answers
Related