CODEWITHSUNDEEP
javascriptlocal-storage
mellimel
mellimel

Reputation: 37

How do I repopulate multiple textareas with their specific user input (saved as an array in localStorage) on refresh?

I'm building a scheduling web app, and it shows a table of rows with time of day, a text area, and a save button side by side for each hour of the day. The user can type their info into the textarea next to a given time, click the button, and it will save their input to localStorage. On refresh, the localStorage still shows the saved user input when I console.log it, but it won't repopulate the textareas with it. I want their user input to still show up in those textareas when they refresh the page, but something about how I'm using localStorage.getItem doesn't seem to be working. I'd love some help, and thank you!

(Sorry in advance that the images are posting as links, it won't let me embed them)

Here's an example of the HTML I have for each row of the table, which includes the textarea.

This is my current JS for adding the user input to localStorage.

And this is all I've got for my getItem function so far, which is what I need help fixing!

--

UPDATE: This is the final code that fixed my issues!

// save button was clicked
for (var i = 0; i < saveBtns.length; i++){
saveBtns[i].addEventListener("click", function(event) {
    event.preventDefault();
    // define event text array
    var events = [];
    for (var i = 9; i <= 17; i++) {
        events[i] = document.getElementById(i).value;
    }

    //save events to localStorage
    localStorage.setItem("events", JSON.stringify(events));
    console.log(localStorage);
})};

// load saved user input on refresh
var loadEvents = function() {
    var events = JSON.parse(localStorage.getItem("events"));

    // populate the textareas
    for (var hour in events) {
        if (events[hour]) // check if value is not null
        document.getElementById(hour).value = events[hour];
    }
}

loadEvents();

Upvotes: 1

Views: 146

Answers (2)

Sayan J. Das
Sayan J. Das

Reputation: 922

Store the time in 24 hour format (i.e 0-24 where 17:00 = (17-12)PM = 5PM). This will let you store 9AM to 5PM with numbers 9-17 as index, which is chronological & a perfect ascending order as opposed to 9-12 then resetting to 1-5PM.

Store the values at indexes which represent the hour of the day:

var events = [];
// 9AM to 5PM
for(var i=9; i<=17; i++) {
    events[i] = document.getElementById(i).value;
}

Make sure each textarea has an ID of the number in 24 hour format (9-17 in this case).

Now, you need to set the value property of the textareas after getting the item from localStorage.

var loadEvents = function() {
    var events = JSON.parse(localStorage.getItem("events"));

    // Populate the textareas
    for (var hour in events) {
        if(events[hour]) // Check if value is not null
            document.getElementById(hour).value = events[hour];
    }
}

If you want it to be repopulated on page load:

document.addEventListener('load', loadEvents);

Keep in mind the load event will only fire if your script loads before the page loads. If your script loads after the page loads, you can simply call the function instead:

loadEvents();

Upvotes: 0

Joe199382
Joe199382

Reputation: 266

If you have the above requirements, you should not refresh your screen, but only store your data.

If you really need to refresh the screen, you can consider taking out the data and re-assigning the value to the component after the screen is refreshed.

Upvotes: 0

Related Questions