Reputation: 81
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
// --------------------------------------------------->
Upvotes: 0
Views: 98
Reputation: 7616
$(function() {
... });
to make sure the DOM is ready.var name = 'timeBlock-' + $(this).parent().attr("id");
, and use that name in localStorage.setItem()
.var val = localStorage.getItem(name) || '';
..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);
});
});
Upvotes: 1