Why does my offline functionality work on localhost but fail after hosting website? Data retrieval from local storage isn't functioning as expected

Question

I created a weather application and made the code so that when user is online all the data searched is saved in the local storage and when user is offline it still shows data from the local storage. it seemed to work when i was trying from local host but after hosting my website it does not work. if(navigator.onLine){ try { const response = await fetch("https://api.openweathermap.org/data/2.5/weather?q=Dhangadhi&units=metric&appid=5765879898u8u8");

  if (response.ok) {
      const datas = await response.json();         
      localStorage.setItem('Dhangadhi',JSON.stringify(datas));
      console.log("data stored in local storage.");
      var dData = localStorage.getItem('Dhangadhi');
      var storedData = JSON.parse(dData);
  } else {
      console.error("Failed to fetch data. Status:", response.status);
  }

} catch (error) {

  var dData = localStorage.getItem('Dhangadhi');
  var storedData = JSON.parse(dData);
  console.log("data retrieved from local storage");

}}

I tried the same code that worked from localhost and i was expecting the same results for after hosting the website but it does not work after hosting the website.