Ive tried a number of different examples to use on my own program. Im making a work day planner, so I have many text boxes and save buttons.
Heres the HTML so you can get an idea of the IDs ive used.
<div class="container">
<div class="row">
<div class="hour">
<p class="time-block col-xl-1 col-lg-1 col-md-2 col-sm-2 ">8a</p>
</div>
<textarea class="description col-xl 10 col-lg-10 col-md-8 col-sm-8 " id="8am-text"></textarea>
<button id="8am-btn" class="saveBtn col-xl-1 col-lg-1 col-md-2 col-sm-2">Save</button>
</div>
</div>
That is one of the 'time blocks' I have set up with the textbox and the save button that will be referenced in the JS portion.
$('#8am-btn').on('click', function() {
var tb8 = $('#8am-text').val();
localStorage.setItem('8am-text', tb8);
});
As it stands I can look in the local storage and successfully save the contents of the text-box. I just cant get any function to work to get the value of the local storage to corresponding text box so it remains after a page refresh.
An attempt i've tried:
if(!localStorage.getItem("8am-text")){
tb8.value = "";
} else {
tb8.value = localStorage.getItem('8am-text')
};
Thank you for all the potential help, im really pulling my hair out over this!
You try this way.
<div class="container">
<div class="row">
<div class="hour">
<p class="time-block col-xl-1 col-lg-1 col-md-2 col-sm-2 ">8a</p>
</div>
<textarea class="description col-xl 10 col-lg-10 col-md-8 col-sm-8 " id="8am-text"></textarea>
<button id="8am-btn" class="saveBtn col-xl-1 col-lg-1 col-md-2 col-sm-2">Save</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
$('#8am-btn').on('click', function() {
var tb8 = $('#8am-text').val();
localStorage.setItem('8am-text', tb8);
});
if (typeof(Storage) !== "undefined") {
// Store
$("#8am-text").val(localStorage.getItem("8am-text"));
} else {
$("#8am-text").val("Undefined");
}