Angular reload時如何設置Timeout不重復

Question

我有一些數據及其處理代碼如下：

LIST = [{
    "id": "1lqgDs6cZdWBL",
    "timeUpdated": "2020-04-22 12:51:23",
    "status": "CLOSED"
}, {
    "id": "C2Zl9JWfZHSJ",
    "timeUpdated": "2020-04-22 12:51:07",
    "status": "CLOSED"
}, {
    "id": "BHbiVcCaQa2d",
    "timeUpdated": "2020-04-15 14:53:12",
    "status": "CLOSED"
}];


ngOnInit() {
  this.initializeAlertTimer();
}
initializeAlertTimer(data?: any, duration?: any) {
  const DURATION = duration ? 20000 : 1000
  setTimeout(() => {
  }, DURATION)
}

addData() {
  const data = {
     "id": "qHFw59mujN9X",
     "timeCreated": "2020-03-06 12:21:06",
     "status": "NEW",
   }
   this.initializeAlertTimer(data, 20000);
}

我在這里嘗試做的是，當打開應用程序時，它會從控制台列出所有數據LIST ，即使它會更改頁面或重新加載它不應該重復的頁面，並且在單擊addData()時它會添加新數據然后通過initializeAlertTime()它將顯示最新數據。

Answer 1

有很多方法可以做到這一點：1）使用本地存儲，2）會話存儲 3）服務 class

本地存儲

保存到 LocalStorage：

localStorage.setItem('key', value);

對於具有屬性的對象：

localStorage.setItem('key', JSON.stringify(object));

從本地存儲中獲取：

localStorage.getItem('key');

對於對象：

JSON.parse(localStorage.getItem('key'));

您可以使用這部分代碼來獲取剩余時間

localStorage.setItem('DURATION',DURATION)
    localStorage.setItem('start',Date.now()) // milliseconds
    

需要的時候

    const elapsed = Date.now() - localStorage.getItem('start');
    const remaining =  localStorage.setItem('DURATION') - elapsed; // divide by 1000 for seconds

注意：重新加載時將保留值 2)localStorage Object 將數據保存為字符串並檢索為字符串。 如果值為 object 存儲為字符串，則需要解析所需的 output。 例如 parseInt(localStorage.getItem('key'));

Answer 2

當您重新加載應用程序時，您的所有變量和堆棧都會重新初始化。 因此，無法跟蹤用戶是否在第一次重新加載應用程序時訪問過。

您可以在數據庫中存儲一些值以跟蹤或使用localstorage或session storage 。

如果您想在更改屏幕時進行跟蹤，這可以通過使用服務和定義變量來實現。

當您用戶第二次訪問該頁面時，您只需檢查存儲在服務中的變量的值。