JavaScript Local Storage removes in Chrome and Edge but not within Firefox

Question

My current problem is that the local storage is persisting data that needs to be removed if the user encounters an error by entering an incorrect postcode within the URL. In Chrome and Edge, this is working as expected.

Firstly I have a global variable of apiFailed that is set to false. I have weatherData that is an array of objects that is used to store and access the API data properties, I have storedData which is used for localStorage getItem() and setItem() and removeItem() properties and the savedWeatherData that gets assigned the storedData variable and is used to display and retrieve the persisted localStorage data.

On first running, as the localStorage has no data and is null, I check this and then assign the savedWeatherData variable the persisted data. I also check to ensure that apiFailed is false. I also refresh the page (via code), just to ensure that the data is retrieved. That code is found below here:

if (savedWeatherData == null || savedWeatherData == undefined 
|| savedWeatherData === null || savedWeatherData === undefined) {
        if (apiFailed == false) {
          console.log('savedWeatherData is NuLL');
          storedData = JSON.parse(window.localStorage.getItem('data'));
          savedWeatherData = storedData;
          window.location.reload();

          if (navigator.userAgent.indexOf("Firefox") != -1) {
            console.log('You are in Firefox');
          }
        }
      } else {
        if (apiFailed == false) {
          console.log('savedWeatherData is NOT NULL');
          // if (navigator.userAgent.indexOf("Firefox") != -1) {
        }
      }

This works as expected in all browsers, Chrome, Edge and Firefox. On first page start up, there is no localStorage data, so this gets assigned and the page refreshes. Upon refresh, localStorage is no longer null and has been assigned to savedWeatherData. Which is then used throughout the application to retrieve and display data.

However, if the user enters a wrong postcode at any point, say entering a special character by mistake, Chrome and Edge run the code below as expected, displaying an error page instead and not fetching any data.

  console.log('APIFAILED status ' + apiFailed);
  if (apiFailed == true) {
    storedData = window.localStorage.removeItem("data");
    savedWeatherData = storedData;
  }

Here comes my problem, in Firefox, the console.log of apiFailed shows that this is still false. Therefore the localStorage is not removed. This means that the error page does not display in Firefox, instead of an error message displaying like in Chrome and Edge, because the localStorage still has the data, this data gets displayed as if the user entered a correct postcode, even though they have not. The data persisted by the localStorage is not getting removed in the localStorage of Firefox. It does get removed from the localStorage of Chrome and Edge, I see that in the Developer console.

Here is how I get my error page to display. (This is done by using the Phaser 3 Framework):

if (apiFailed == true) {
    background = this.add.image(this.game.canvas.width / 2, this.game.canvas.height / 2, "sorryBackground");
    var apiFailText = this.add.text(150, this.game.canvas.height / 2 - 100, "Sorry. The weather forecast is currently unavailable",
      { fontFamily: "Open Sans, sans-serif", fontSize: 70, }).setOrigin(0, 0);
    storedData = window.localStorage.removeItem("data");
    savedWeatherData = storedData;
  }

I should also mention that apiFailed gets set to true in the catch after the fetch and retrieving and setting up the API data.

Here:

        .catch(() => {
      console.log(".catch() called. Error within the .fetch()");
      apiFailed = true;
    });

Any help and feedback would be appreciated.

Thanks.

Answer 1

I solved this issue.

I noticed in Firefox the issue was being caused as it was receiving an 400 error from my API fetch request. This was not the case in Chrome and Edge. Therefore, In the end I modified my fetch so that with the response I could see if I was getting any errors. If it does get any errors, all I do is simply clear out the entire localStorage and set apiFailed to true, which in turn runs the block of code to display the error page and message.

Here is the if statement within my fetch:

 if (!response.ok) {
        apiFailed = true;
        window.localStorage.clear();
   }

Here is the if statement that displays the error page. Just in case, I do the same here by removing the stored API data within the localStorage and just set my savedWeatherData variable to this.

if (apiFailed == true) {
    background = this.add.image(this.game.canvas.width / 2, 
    this.game.canvas.height / 2, "sorryBackground");
    var apiFailText = this.add.text(150, this.game.canvas.height / 2 - 100, 
      "Sorry. The weather forecast is currently unavailable.", { fontFamily: 
      "Open Sans, sans-serif", fontSize: 70, }).setOrigin(0, 0);
    storedData = window.localStorage.removeItem('data');
    savedWeatherData = storedData;
  }

After testing this is now looking to work within all major browsers: Chrome, Edge and Firefox

Answer 2

I solved this issue.

I noticed in Firefox the issue was being caused as it was receiving an 400 error from my API fetch request. This was not the case in Chrome and Edge. Therefore, In the end I modified my fetch so that with the response I could see if I was getting any errors. If it does get any errors, all I do is simply clear out the entire localStorage and set apiFailed to true, which in turn runs the block of code to display the error page and message.

Here is the if statement within my fetch:

   if (!response.ok) {
        apiFailed = true;
        window.localStorage.clear();
   }

Here is the if statement that displays the error page. Just in case, I do the same here by removing the stored API data within the localStorage and just set my savedWeatherData variable to this.

  if (apiFailed == true) {
    background = this.add.image(this.game.canvas.width / 2, 
    this.game.canvas.height / 2, "sorryBackground");
    var apiFailText = this.add.text(150, this.game.canvas.height / 2 - 100, 
      "Sorry. The weather forecast is currently unavailable.", { fontFamily: 
      "Open Sans, sans-serif", fontSize: 70, }).setOrigin(0, 0);
    storedData = window.localStorage.removeItem('data');
    savedWeatherData = storedData;
  }

After testing this is now looking to work within all major browsers: Chrome, Edge and Firefox