JavaScript 本地存儲在 Chrome 和 Edge 中刪除，但不在 Firefox 中

Question

我當前的問題是，如果用戶在 URL 中輸入不正確的郵政編碼而遇到錯誤，本地存儲會保留需要刪除的數據。 在 Chrome 和 Edge 中，這按預期工作。

首先，我有一個全局變量 apiFailed 設置為 false。 我有weatherData，它是一個用於存儲和訪問API 數據屬性的對象數組，我有用於localStorage getItem() 和setItem() 和removeItem() 屬性的storedData 以及分配給storedData 變量的savedWeatherData用於顯示和檢索持久化的 localStorage 數據。

在第一次運行時，由於 localStorage 沒有數據並且為空，我檢查了這一點，然后將savedWeatherData 變量分配給持久化數據。 我還檢查以確保 apiFailed 為假。 我還刷新頁面（通過代碼），只是為了確保檢索到數據。 該代碼在下面找到：

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) {
        }
      }

這在所有瀏覽器、Chrome、Edge 和 Firefox 中都按預期工作。 在第一頁啟動時，沒有 localStorage 數據，因此它被分配並刷新頁面。 刷新后，localStorage 不再為 null 並已分配給 savedWeatherData。 然后在整個應用程序中使用它來檢索和顯示數據。

但是，如果用戶在任何時候輸入了錯誤的郵政編碼，比如錯誤地輸入了一個特殊字符，Chrome 和 Edge 會按預期運行下面的代碼，而是顯示錯誤頁面而不是獲取任何數據。

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

我的問題來了，在Firefox中，apiFailed的console.log顯示這仍然是錯誤的。 因此 localStorage 不會被刪除。 這意味着錯誤頁面不會在 Firefox 中顯示，而不是像 Chrome 和 Edge 中那樣顯示錯誤消息，因為 localStorage 仍然有數據，這些數據會像用戶輸入正確的郵政編碼一樣顯示，即使他們沒有. localStorage 保存的數據不會在 Firefox 的 localStorage 中刪除。 它確實從 Chrome 和 Edge 的 localStorage 中刪除了，我在開發人員控制台中看到了這一點。

這是我如何顯示我的錯誤頁面。 （這是通過使用 Phaser 3 框架完成的）：

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

我還應該提到 apiFailed 在獲取、檢索和設置 API 數據之后的 catch 中設置為 true。

這里：

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

任何幫助和反饋將不勝感激。

謝謝。

Answer 1

我解決了這個問題。

我注意到在 Firefox 中，問題是由於它從我的 API 獲取請求中收到 400 錯誤而引起的。 Chrome 和 Edge 並非如此。 因此，最后我修改了我的 fetch 以便通過響應我可以看到我是否收到任何錯誤。 如果確實出現任何錯誤，我所做的只是清除整個 localStorage 並將 apiFailed 設置為 true，然后運行代碼塊以顯示錯誤頁面和消息。

這是我的 fetch 中的 if 語句：

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

這是顯示錯誤頁面的 if 語句。 為了以防萬一，我在這里通過刪除 localStorage 中存儲的 API 數據來做同樣的事情，並將我的 savedWeatherData 變量設置為這個。

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

經過測試，現在希望在所有主要瀏覽器中都能正常工作：Chrome、Edge 和 Firefox

Answer 2

我解決了這個問題。

我注意到在 Firefox 中，問題是由於它從我的 API 獲取請求中收到 400 錯誤而引起的。 Chrome 和 Edge 並非如此。 因此，最后我修改了我的 fetch 以便通過響應我可以看到我是否收到任何錯誤。 如果確實出現任何錯誤，我所做的只是清除整個 localStorage 並將 apiFailed 設置為 true，然后運行代碼塊以顯示錯誤頁面和消息。

這是我的 fetch 中的 if 語句：

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

這是顯示錯誤頁面的 if 語句。 為了以防萬一，我在這里通過刪除 localStorage 中存儲的 API 數據來做同樣的事情，並將我的 savedWeatherData 變量設置為這個。

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

經過測試，現在希望在所有主要瀏覽器中都能正常工作：Chrome、Edge 和 Firefox