Local storage is not saving my inputs and goes away on refresh-CodePudding

I finally got my local storage to show the value of the text area but now my local storage is not saving the value of the text input. The value will show up in local storage like I said but when I refresh the page the text input does not stay. Not sure if I'm calling it wrong or my local storage itself is written wrong. The deployed page is here if it helps with seeing it. https://doolittle28.github.io/work-day-scheduler/

var time9 = (parseInt($('#9').attr('data-value')));
var time10 = (parseInt($('#10').attr('data-value')));
var time11 = (parseInt($('#11').attr('data-value')));
var time12 = (parseInt($('#12').attr('data-value')));
var time13 = (parseInt($('#13').attr('data-value')));
var time14 = (parseInt($('#14').attr('data-value')));
var time15 = (parseInt($('#15').attr('data-value')));
var time16 = (parseInt($('#16').attr('data-value')));
var time17 = (parseInt($('#17').attr('data-value')));

// Keeps date on the page
var date = moment().format("dddd, MMMM Do YYYY");
$("#currentDay").html(date);



// Event listender for saving activities in timeslots to local storage
$('.saveBtn').on('click', function () {

    localStorage.setItem("time9", $("#input9").val());
    localStorage.setItem("time10", $("#input10").val());
    localStorage.setItem("time11", $("#input11").val());
    localStorage.setItem("time12", $("#input12").val());
    localStorage.setItem("time13", $("#input13").val());
    localStorage.setItem("time14", $("#input14").val());
    localStorage.setItem("time15", $("#input15").val());
    localStorage.setItem("time16", $("#input16").val());
    localStorage.setItem("time17", $("#input17").val());
});

// Changes color of timeslot container depending on time
function color() {
    var currentTime = moment().hour(); // variable to pull current time from

    // 9am timeslot
    if (time9 > currentTime) {
        $('.acts9').addClass('future')
    }
    else if (time9 === currentTime) {
        $('.acts9').addClass('present')
    }
    else {
        $('.acts9').addClass('past')
    };

    // 10am timeslot
    if (time10 > currentTime) {
        $('.acts10').addClass('future')
    }
    else if (time10 === currentTime) {
        $('.acts10').addClass('present')
    }
    else {
        $('.acts10').addClass('past')
    };

    // 11am timeslot
    if (time11 > currentTime) {
        $('.acts11').addClass('future')
    }
    else if (time11 === currentTime) {
        $('.acts11').addClass('present')
    }
    else {
        $('.acts11').addClass('past')
    };

    // 12pm timeslot
    if (time12 > currentTime) {
        $('.acts12').addClass('future')
    }
    else if (time12 === currentTime) {
        $('.acts12').addClass('present')
    }
    else {
        $('.acts12').addClass('past')
    };

    // 1pm timeslot
    if (time13 > currentTime) {
        $('.acts13').addClass('future')
    }
    else if (time13 === currentTime) {
        $('.acts13').addClass('present')
    }
    else {
        $('.acts13').addClass('past')
    };

    // 2pm timeslot
    if (time14 > currentTime) {
        $('.acts14').addClass('future')
    }
    else if (time14 === currentTime) {
        $('.acts14').addClass('present')
    }
    else {
        $('.acts14').addClass('past')
    };

    // 3pm timeslot
    if (time15 > currentTime) {
        $('.acts15').addClass('future')
    }
    else if (time15 === currentTime) {
        $('.acts15').addClass('present')
    }
    else {
        $('.acts15').addClass('past')
    };

    // 4pm timeslot
    if (time16 > currentTime) {
        $('.acts16').addClass('future')
    }
    else if (time16 === currentTime) {
        $('.acts16').addClass('present')
    }
    else {
        $('.acts16').addClass('past')
    };

    // 5pm timeslot
    if (time17 > currentTime) {
        $('.acts17').addClass('future')
    }
    else if (time17 === currentTime) {
        $('.acts17').addClass('present')
    }
    else {
        $('.acts17').addClass('past')
    };



};

color(); // Runs color function to color code schedule

// Pulls time and activity from local storage for each timeslot
$("#input9").val(localStorage.getItem("abc"));
$("#input10").val((localStorage.getItem('.acts10')));
$("#input11").val((localStorage.getItem('.acts11')));
$("#input12").val((localStorage.getItem('.acts12')));
$("#input13").val((localStorage.getItem('.acts13')));
$("#input14").val((localStorage.getItem('.acts14')));
$("#input15").val((localStorage.getItem('.acts15')));
$("#input16").val((localStorage.getItem('.acts16')));
$("#input17").val((localStorage.getItem('.acts17')));

<div >

    <div >

      <section >
        <div  id="9" data-value="9">9:00am</div>
        <textarea  id="input9" style="resize: none;"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="10" data-value="10">10:00am</div>
        <textarea  id="input10"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="11" data-value="11">11:00am</div>
        <textarea  id="input11"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="12" data-value="12">12:00pm</div>
        <textarea  id="input12"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="13" data-value="13">1:00pm</div>
        <textarea  id="input13"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="14" data-value="14">2:00pm</div>
        <textarea  id="input14"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="15" data-value="15">3:00pm</div>
        <textarea  id="input15"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="16" data-value="16">4:00pm</div>
        <textarea  id="input16"></textarea>
        <button type="button" >Save</button>
      </section>

      <section >
        <div  id="17" data-value="17">5:00pm</div>
        <textarea  id="input17"></textarea>
        <button type="button" >Save</button>
      </section>

    </div>
    <!-- Timeblocks go here -->
  </div>

CodePudding user response：

You set local Storage by name of time10 but when you get by name of.acts 10 , this name is not set on localstorage. You should get from localstorage like down code.

 $("#input9").val(localStorage.getItem("time9"));
 $("#input10").val((localStorage.getItem('time10')));
 $("#input11").val((localStorage.getItem('time11')));
 $("#input12").val((localStorage.getItem('time12')));
 $("#input13").val((localStorage.getItem('time13')));
 $("#input14").val((localStorage.getItem('time14')));
 $("#input15").val((localStorage.getItem('time15')));
 $("#input16").val((localStorage.getItem('time16')));
 $("#input17").val((localStorage.getItem('time17')));