Я, наконец, получил свое локальное хранилище, чтобы показать значение текстовой области, но теперь мое локальное хранилище не сохраняет значение ввода текста. Значение будет отображаться в локальном хранилище, как я уже сказал, но когда я обновляю страницу, ввод текста не сохраняется. Не уверен, что я неправильно это называю, или само мое локальное хранилище написано неправильно. Развернутая страница находится здесь, если это помогает ее увидеть. 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>
@ggorlen Спасибо! Я попытался снова вызвать значение, но это не сработало, но после прочтения вашего комментария я вернулся и понял, что мне нужно вызвать time10, time11 и т. д. в getItem. Я начал это и стал очень глубоким и не хотел возвращаться и реорганизовывать его в массив. Вы думаете как переменная, которая все время хранится и вводит как объекты?
Вы устанавливаете локальное хранилище по имени 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')));
Вы устанавливаете
time10
, но затем используете.acts10
, чтобы получить его. Имена должны совпадать. Кроме того, вы можете захотеть изучить массивы. Выполнениеfoo1
,foo2
,foo3
,foo25
означает, что вам придется повторять большое количество кода снова и снова, что неустойчиво и подвержено ошибкам. Представьте, если бы у вас было 300 или 3000 элементов в списке, что является обычным явлением.