Using localStorage to set and get values for date fields

Question

My input fields for the dates are not saved when the User presses the submit button. The page reloads and the values for the input fields are empty. So I'm using localStorage to save the values when it loads. I can't think of other JS functions or libraries that can help me clean this up.

<script type="text/javascript">
 const dateObj= {
 "fromDate":'', 'to_admitrange_date':'', 
 'from_dischargerange_date':'', 'to_dischargerange_date':''
 }
 jQuery(document).ready(function() {
 jQuery("#from_admitrange_date, #to_admitrange_date, #from_dischargerange_date, #to_dischargerange_date").on("change",function(){
 const fromDateRange = jQuery("#from_admitrange_date").val();
 const toAdmitRange = jQuery("#to_admitrange_date").val();
 const fromDischargeRange = jQuery("#from_dischargerange_date").val();
 const toDischargeRange = jQuery("#to_dischargerange_date").val();
 dateObj.fromDate = fromDateRange;
 dateObj.to_admitrange_date = toAdmitRange;
 dateObj.from_dischargerange_date = fromDischargeRange;
 dateObj.to_dischargerange_date = toDischargeRange;
 
 localStorage.setItem("fromDateRange", JSON.stringify(dateObj));
 localStorage.setItem("to_admitrange_date", JSON.stringify(dateObj));
 localStorage.setItem("from_dischargerange_date", JSON.stringify(dateObj));
 localStorage.setItem("to_dischargerange_date", JSON.stringify(dateObj));
 });
 //Get the value of the dates
 const getLocalItem = localStorage.getItem("fromDateRange");
 const getLocalItemToAdmitRange = localStorage.getItem("to_admitrange_date");
 const getLocalItemFromDischargeRange = localStorage.getItem("from_dischargerange_date");
 const getLocalItemToDischargeRange = localStorage.getItem("to_dischargerange_date");
 if(getLocalItem || getLocalItemToAdmitRange || getLocalItemFromDischargeRange || getLocalItemToDischargeRange){
 const getData = JSON.parse(getLocalItem);
 const getData2 = JSON.parse(getLocalItemToAdmitRange);
 const getDataFromDischarge = JSON.parse(getLocalItemFromDischargeRange);
 const getDataToDischarge = JSON.parse(getLocalItemToDischargeRange);
 // console.log("localStorage", getData.fromDate);
 // console.log("localStorage to_admitrange", getData2.to_admitrange_date);
 jQuery("#from_admitrange_date").val(getData.fromDate);
 jQuery("#to_admitrange_date").val(getData2.to_admitrange_date);
 jQuery("#from_dischargerange_date").val(getData2.from_dischargerange_date);
 jQuery("#to_dischargerange_date").val(getData2.to_dischargerange_date);
 }
 </script>

• Blindman67: Is your code complete as you are missing closing tags and brackets })</script>?
• JThao: Sorry missed the closing tags but yes it is complete and it is working. I just find it redundant that I have to stringify and keep declaring each variable

Answer 1

You can reduce duplication by creating a function to get the date inputs, and using Object.keys to map the values accordingly to the keys.

That allowed me to cut down around 15 lines of code:

const dateObj = {
 "from_admitrange_date":'', 'to_admitrange_date':'', 
 'from_dischargerange_date':'', 'to_dischargerange_date':'',
 }
 function getDateInputs (date_id) {
 let date_value = jQuery(`#${date_id}`).val();
 dateObj[date_id] = date_value;
 localStorage.setItem(date_id, dateObj[date_id]);
 }
 jQuery(document).ready(function() {
 //Get the values from localStorage if it exists and set it in the input field
 localStorage.getItem("from_admitrange_date") ? jQuery("#from_admitrange_date").val(localStorage.getItem("from_admitrange_date")) : "";
 localStorage.getItem("to_admitrange_date") ? jQuery("#to_admitrange_date").val(localStorage.getItem("to_admitrange_date")) : "";
 
 localStorage.getItem("from_dischargerange_date") ? jQuery("#from_dischargerange_date").val(localStorage.getItem("from_dischargerange_date")) : "";
 localStorage.getItem("to_dischargerange_date") ? jQuery("#to_dischargerange_date").val(localStorage.getItem("to_dischargerange_date")) : "";
 // Get the keys from the dateObj and use them as a selector for the on change handler
 Object.keys(dateObj)
 .map((val) => {
 jQuery(`#${val}`).on("change", function() {
 getDateInputs(val);
 })
 })