我當前的問題是，如果用戶在 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;
});
任何幫助和反饋將不勝感激。
謝謝。
uj5u.com熱心網友回復：
我解決了這個問題。
我注意到在 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
uj5u.com熱心網友回復：
我解決了這個問題。
我注意到在 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/341194.html
標籤：javascript 打字稿 火狐 本地存储 移相器