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 。

如果您想在更改屏幕时进行跟踪，这可以通过使用服务和定义变量来实现。

当您用户第二次访问该页面时，您只需检查存储在服务中的变量的值。