Локальное хранилище не сохраняет мои входные данные и исчезает при обновлении

Я, наконец, получил свое локальное хранилище, чтобы показать значение текстовой области, но теперь мое локальное хранилище не сохраняет значение ввода текста. Значение будет отображаться в локальном хранилище, как я уже сказал, но когда я обновляю страницу, ввод текста не сохраняется. Не уверен, что я неправильно это называю, или само мое локальное хранилище написано неправильно. Развернутая страница находится здесь, если это помогает ее увидеть. 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 class="container-fluid">

    <div class="row">

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="9" data-value="9">9:00am</div>
        <textarea class="col-8 border border-info acts9" id="input9" style="resize: none;"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>
        <textarea class="col-8 border border-info acts10" id="input10"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="11" data-value="11">11:00am</div>
        <textarea class="col-8 border border-info acts11" id="input11"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="12" data-value="12">12:00pm</div>
        <textarea class="col-8 border border-info acts12" id="input12"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="13" data-value="13">1:00pm</div>
        <textarea class="col-8 border border-info acts13" id="input13"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="14" data-value="14">2:00pm</div>
        <textarea class="col-8 border border-info acts14" id="input14"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="15" data-value="15">3:00pm</div>
        <textarea class="col-8 border border-info acts15" id="input15"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="16" data-value="16">4:00pm</div>
        <textarea class="col-8 border border-info acts16" id="input16"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

      <section class="col-12 mb-3 row">
        <div class="col-2 timeslots hour" id="17" data-value="17">5:00pm</div>
        <textarea class="col-8 border border-info acts17" id="input17"></textarea>
        <button type="button" class="col-2 btn btn-info saveBtn">Save</button>
      </section>

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

Вы устанавливаете time10, но затем используете .acts10, чтобы получить его. Имена должны совпадать. Кроме того, вы можете захотеть изучить массивы. Выполнение foo1, foo2, foo3, foo25 означает, что вам придется повторять большое количество кода снова и снова, что неустойчиво и подвержено ошибкам. Представьте, если бы у вас было 300 или 3000 элементов в списке, что является обычным явлением.

ggorlen 10.04.2022 05:51

@ggorlen Спасибо! Я попытался снова вызвать значение, но это не сработало, но после прочтения вашего комментария я вернулся и понял, что мне нужно вызвать time10, time11 и т. д. в getItem. Я начал это и стал очень глубоким и не хотел возвращаться и реорганизовывать его в массив. Вы думаете как переменная, которая все время хранится и вводит как объекты?

Kevin Doolittle 10.04.2022 06:13
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
2
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы устанавливаете локальное хранилище по имени time10, но когда вы получаете имя .acts 10, это имя не задано в локальном хранилище. Вы должны получить из localstorage как вниз код.

 $("#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')));

Другие вопросы по теме