當 inte.net 在線時獲取本地存儲數據

Question

因此，當 inte.net 使用 Vuejs 在線時，我試圖獲取本地存儲數據。 Vuejs/Laravel/MySQL 中的我的 ToDo 應用程序堆棧。 基本上，當 inte.net 在線時，我將數據存儲在 localStorage 中。 此外，我還添加了 ToDo 應用程序的所有功能，包括添加、刪除和編輯待辦事項等離線功能。 我無法將本地存儲數據發布到 MySQL 數據庫。

updateAllTodos() {
  let data = { todos: this.todos };
  if (navigator.onLine) {
    axios.post(this.api + "/update_all", data).then((res) => {
      localStorage.setItem("todos", JSON.stringify(this.todos));
    });
  } else {
    JSON.parse(localStorage.getItem("todos", JSON.stringify(this.todos)));
  }
},

如何在 Inte.net 在線時發布 localStorage 數據？

Answer 1

您可以通過使用事件偵聽器並設置變量 true/false 來處理此問題（更新在線狀態）。 稍后您可以觀察數據屬性並相應地做一些事情。

  data() {
    return {
      isOnLine:navigator.onLine
    }
  },
  mounted() {
     window.addEventListener('online', () => {this.isOnLine = true});
     window.addEventListener('offline', () => {this.isOnLine = false});
  },
  watch: {
   onLine: function (val) {
      if(this.isOnLine){
        // make axios call here
      }
    },
  }