why is my data being stored in local storage, but is not displaying on the page?-CodePudding

I'm trying to save some values I input inside a text box, however, the values are stored in local storage but not on the webpage. here's a link to the repo on github: https://github.com/malekmekdashi/work_day_scheduler

here is an example of what my code looks like:

$('.saveBtn').on('click', function() {
  var inputValue = $(this).siblings('.description').val();
  var timeValue = $(this).parent('id');

  localStorage.setItem(inputValue, timeValue);
});

$('#item1.description').val(localStorage.getItem('item1'));

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >9am</div>
  <textarea  id="item1"> </textarea>
  <button ><i ></i></button>
</div>

CodePudding user response：

try this!

<link href="https://cdnjs.cloudflare.com/ajax/libs/font- 
   awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<div >
    <div >9am</div>
    <textarea  id="inputValue"> </textarea>
    <textarea  id="timeValue "> </textarea>
    <button ><i ></i></button>
 </div>

and jQuery!

$('.saveBtn').on('click', function() {
   var inputValue = $(this).siblings('.description').val();
   var timeValue = $(this).parent('id');

   localStorage.setItem("inputValue", inputValue );
   localStorage.setItem("timeValue ", timeValue );
});

$('#inputValue.description').val(localStorage.getItem('inputValue'));
$('#timeValue .description').val(localStorage.getItem('timeValue '));

CodePudding user response：

Values are stored in the localStorage but you have used the wrong key when getting values from the localStorage:

$('.saveBtn').on('click', function() {
    var inputValue = $(this).siblings('.description').val();
    var timeValue = $(this).parent('id');

    localStorage.setItem(inputValue, timeValue );
});

$('#item1.description').val(localStorage.getItem(inputValue));