how can i save a variable when the page reloads using that variable

Question

I have a html drop down to select times to adjust the data for the user. The issue is that the webpage wont save it. It will just go back to the default setting.

JS

 var AM
var PM
var e = document.getElementById("UserTimeAM");
function onChangeAM() {
  

      var text = e.options[e.selectedIndex].text;
      console.log(AM, text);
     
       AM = e.value;
       
    }
    e.onchangeAM = onChangeAM;
    onChangeAM();
    
    var e = document.getElementById("UserTimePM");
    function onChangePM() {
      
      var text = e.options[e.selectedIndex].text;
      console.log(PM, text);
      
       PM = e.value;
       call();
    }
    e.onchangePM = onChangePM;
    onChangePM(); 


    function call(){
      
    fetch(
      buildNIWA_URL(NIWA_PATHS.data, currentLocation, 31))
    
    .then(response => response.json())
    .then(data => {
        let lowtidedata = document.createElement("div");
        let hightidedata = document.createElement("div");
        lowtidedata.classList.add("lowtidedata");
    
        let wantedData = data.values
        wantedData.splice(0,2)
        wantedData.splice(116)
        console.log(wantedData)
        let lowHigh = wantedData.filter(x =>{
            let wTime = new Date(x.time).getUTCHours()
            return wTime >= 6 && wTime <= 18
            
          
          
        })
        console.log(lowHigh)
        for(let i = 1; i <= 31; i++)
        {
            let square2 = document.createElement("div");
            let square = document.createElement("div");
            let tidedata1 = document.createElement("div");
            let tidedata2 = document.createElement("div");
            let tidedata1Full = document.createElement("div");
            let tidedata2Full = document.createElement("div");
            let monthNum = document.createElement("div");
            tidedata1.classList.add("tidedata");
            tidedata2.classList.add("tidedata");
            tidedata1Full.classList.add("tidedata1Full");
            tidedata2Full.classList.add("tidedata2Full");
            square2.classList.add("square2");
            square.classList.add("square");
            monthNum.classList.add("monthNum");
            monthNum.innerHTML = `${i}`;
            square.innerHTML += `<span></span>
            <span></span>
            <span></span>
            <span></span>`
            
        lowHigh.forEach(d =>{
        let wDate = new Date(d.time).getUTCDate();
        var AM_Hour = AM;
        var PM_Hour = PM;
        //AM_Hour = ("0" + AM_Hour);
    
        
        
        if(wDate == i+1)
            {
                if(tidedata1.innerHTML == "")
                {
                    
                    tidedata1.innerHTML = `${AM_Hour}: - ${d.value}m`
                    tidedata1Full.innerHTML = `${AM_Hour}:am - ${d.value}m`
                }
                else
                {
                    tidedata2.innerHTML = `${PM_Hour}: - ${d.value}m`
                    tidedata2Full.innerHTML = `${PM_Hour}:pm - ${d.value}m`
                }
            }
        })

The idea being that the user can pick a time frame to get specific data related to that time frame. In this case it is tide height. But evetime the request is submitted it just shows the default data.

Html for the form. i have another one the same but for pm.

<form>
    <select id="UserTimeAM">
      <option value="01:00">1 AM</option>
      <option value="02:00" >2 AM </option>
      <option value="03:00">3 AM</option>
      <option value="04:00">4 AM</option>
      <option value="05:00">5 AM</option>
      <option value="06:00">6 AM</option>
      <option value="07:00">7 AM</option>
      <option value="08:00">8 AM</option>
      <option value="09:00">9 AM</option>
      <option value="10:00">10 AM</option>
      <option value="11:00">11 AM</option>
      <option value="00:00">12 AM</option>
      <input type="submit" value="Submit" onclick="return call()">
    </select>
  </form>