JavaScript 本地存储在 Chrome 和 Edge 中删除，但在 Firefox 中不删除

Question

我当前的问题是，如果用户在 URL 中输入不正确的邮政编码而遇到错误，则本地存储需要删除这些数据。在 Chrome 和 Edge 中，这按预期工作。

首先，我将全局变量 apiFailed 设置为 false。我有 weatherData，它是一个对象数组，用于存储和访问 API 数据属性，我有用于 localStorage getItem() 和 setItem() 和 removeItem() 属性的 storedData 以及分配给 storedData 变量并用于显示和检索持久化 localStorage 数据的 savedWeatherData。

首先运行ning，由于 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 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;
  }

我还应该提到，在获取、检索和设置 API 数据后，apiFailed 在 catch 中设置为 true。

这里：

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

如有任何帮助和反馈，我们将不胜感激。

谢谢。

Answer 1

我解决了这个问题。

我在 Firefox 中注意到这个问题是因为它从我的 API 提取请求中收到一个 400 错误。 Chrome 和 Edge 的情况并非如此。因此，最后我修改了我的提取，以便通过响应我可以查看我是否收到任何错误。如果确实出现任何错误，我所做的只是清除整个 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 的情况并非如此。因此，最后我修改了我的提取，以便通过响应我可以查看我是否收到任何错误。如果确实出现任何错误，我所做的只是清除整个 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

JavaScript 本地存储在 Chrome 和 Edge 中删除，但在 Firefox 中不删除

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

javascript

firefox

local-storage

typescript

phaser-framework