As per question, I am unable to retrieve or display items that I have saved to localStorage. I believe I may have my variables set wrong or not applying the correct logic. I know I have to add a JSON.parse(localStorage.getItem(storedName)) || [], but I'm not sure where it goes exactly and not sure how to then just set the textInput.val to the localStorage items. Every time I try, all the rows (timeBlock) go missing from the page.

// DOM elements pulling from HTML
var currentDay = $("#currentDay");
var schedule = $('.container');

// Moment.js variables
var now = moment().format("dddd, MMMM Do YYYY");
var currentHour = moment().hour();

// Global variables
var workDay = 9;

// --------------------------------------------------->
// START OF PROGRAM
// --------------------------------------------------->

// Setting Current Day to top of the calendar
$(currentDay.text(now));
  
// Adding Rows dynamically using the DOM
for (var i = 0; i < workDay; i  ) {

  // Setting time blocks main divs
  var timeBlock = $("<div>").addClass("row time-row");
  timeBlock.attr("id", i   1);

  // Setting hour column
  var hourCol = $("<div>").addClass("hour col-1");
  hourCol.text(moment().hour(i   workDay).format("hA"));

  // Setting save column
  var saveCol = $("<button>").addClass("saveBtn col-1 fas fa-save");
  saveCol.attr("data-index", i);

  // Setting text input area for timeblocks
  var textInput = $("<textarea>").addClass("task time-block future");

  /* Appending all columns to timeBlock divs and then
  appending timeBlock div to main Schedule container */
  timeBlock.append(hourCol);
  timeBlock.append(textInput);
  timeBlock.append(saveCol);
  schedule.append(timeBlock);

  // Setting textArea color depending on time as defined by currentHour variable
  if (currentHour === (i   workDay)) {
    textInput.attr("class", "task col-10 present");
  }
  else if (currentHour > (i   workDay)){
    textInput.attr("class", "task col-10 past");
  };
};

// Saving work schedule tasks to localStorage()
$('.saveBtn').on("click", function(event) {
  event.preventDefault();
  var workHour = $(this).parent().attr("id");
  var setTask = $(this).siblings(".task").val();
  localStorage.setItem(workHour, setTask);
});

// --------------------------------------------------->
//  END OF PROGRAM
// --------------------------------------------------->

CodePudding user response：

1. Enclose all jQuery code in $(function() { ... }); to make sure the DOM is ready.
2. Your timeBlock id is just a number, which is not specific enough for the local storage item name because the local storage is used by all pages in the current domain. So do something like this: var name = 'timeBlock-' $(this).parent().attr("id"); , and use that name in localStorage.setItem().
3. You can inspect the local storage in the developer tools under Application.
4. To read the local storage, build and use the same name: var val = localStorage.getItem(name) || '';.
5. Set the textarea value with .val()

Your code fixed, but untested:

$(function() {
  // DOM elements pulling from HTML
  var currentDay = $("#currentDay");
  var schedule = $('.container');
  
  // Moment.js variables
  var now = moment().format("dddd, MMMM Do YYYY");
  var currentHour = moment().hour();
  
  // Global variables
  var workDay = 9;
  
  // --------------------------------------------------->
  // START OF PROGRAM
  // --------------------------------------------------->
  
  // Setting Current Day to top of the calendar
  $(currentDay.text(now));
    
  // Adding Rows dynamically using the DOM
  for (var i = 0; i < workDay; i  ) {
  
    // Setting time blocks main divs
    var timeBlock = $("<div>").addClass("row time-row");
    timeBlock.attr("id", i   1);
  
    // Setting hour column
    var hourCol = $("<div>").addClass("hour col-1");
    hourCol.text(moment().hour(i   workDay).format("hA"));
  
    // Setting save column
    var saveCol = $("<button>").addClass("saveBtn col-1 fas fa-save");
    saveCol.attr("data-index", i);
  
    // Setting text input area for timeblocks
    var textInput = $("<textarea>").addClass("task time-block future");
    var name = 'timeBlock-'   (i   1);
    var val = localStorage.getItem(name) || '';
    textInput.val(val);

    /* Appending all columns to timeBlock divs and then
    appending timeBlock div to main Schedule container */
    timeBlock.append(hourCol);
    timeBlock.append(textInput);
    timeBlock.append(saveCol);
    schedule.append(timeBlock);
  
    // Setting textArea color depending on time as defined by currentHour variable
    if (currentHour === (i   workDay)) {
      textInput.attr("class", "task col-10 present");
    }
    else if (currentHour > (i   workDay)){
      textInput.attr("class", "task col-10 past");
    };
  };

  // Saving work schedule tasks to localStorage()
  $('.saveBtn').on("click", function(event) {
    event.preventDefault();
    var name = 'timeBlock-'   $(this).parent().attr("id");
    var val = $(this).siblings(".task").val();
    localStorage.setItem(name, val);
  });
});