时间戳

首页 > 解决方案 > 在Angular中重新加载时如何设置超时不会重复

javascript - 在Angular中重新加载时如何设置超时不会重复

问题描述

我有一些数据及其处理代码如下：

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()它将显示最新数据。

标签： javascriptangulartypescript

解决方案

有很多方法可以做到这一点：1）使用本地存储，2）会话存储3）服务类

本地存储

保存到 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 对象将数据保存为字符串并检索为字符串。如果值是存储为字符串的对象，则需要解析所需的输出。例如 parseInt(localStorage.getItem('key'));

推荐阅读