He probado varios ejemplos diferentes para usar en mi propio programa. Estoy haciendo un planificador del día de trabajo, así que tengo muchos cuadros de texto y botones para guardar.

Aquí está el HTML para que pueda tener una idea de las identificaciones que he usado.

 <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>

Ese es uno de los 'bloques de tiempo' que configuré con el cuadro de texto y el botón Guardar al que se hará referencia en la parte de JS.

 $('#8am-btn').on('click', function() { var tb8 = $('#8am-text').val(); localStorage.setItem('8am-text', tb8); });

Tal como está, puedo buscar en el almacenamiento local y guardar con éxito el contenido del cuadro de texto. Simplemente no puedo hacer que ninguna función funcione para obtener el valor del almacenamiento local en el cuadro de texto correspondiente para que permanezca después de actualizar la página.

Un intento que he intentado:

 if(!localStorage.getItem("8am-text")){ tb8.value = ""; } else { tb8.value = localStorage.getItem('8am-text') };

Gracias por toda la ayuda potencial, ¡realmente me estoy tirando de los pelos por esto!