JavaScript 本地存储在 Chrome 和 Edge 中被删除，但在 Firefox 中没有

Posted 2023-03-05

【中文标题】JavaScript 本地存储在 Chrome 和 Edge 中被删除，但在 Firefox 中没有

【英文标题】：JavaScript Local Storage removes in Chrome and Edge but not within Firefox

【发布时间】：2021-12-12 19:27:05

【问题描述】：

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

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

在第一次运行时，由于 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;
  

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

这里：

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

任何帮助和反馈将不胜感激。

谢谢。

【问题讨论】：

与其他浏览器相比，Firefox 似乎总是会引起问题。

@Deeroy 想想另一个适用的例子（不包括非标准的控制台，浏览器以不同的方式处理）。

【参考方案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

【参考方案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