Preventing setTimeout from repeating upon reload in Angular

Question

Preventing setTimeout from repeating upon reload in Angular

I have a dataset and processing code shown below:

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);
}

My goal is to display the LIST data in the console only once when the application is opened. Even if there are page changes or reloads, it should not repeat. When clicking on addData(), new data will be added and the newest data will be displayed through initializeAlertTime().

javascript angular typescript

Answer 1

Answer №1

There are several methods to achieve the same result: 1)Utilizing local storage, 2)session storage 3)service classes

Local Storage

Saving data into LocalStorage:

localStorage.setItem('key', value);

For objects with properties:

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

Retrieving From Local Storage:

localStorage.getItem('key');

For objects:

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

You can also utilize this code snippet to calculate remaining time

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

when necessary

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

Note:The value will persist even after reloading the page. 2)localStorage Object stores data as a string and retrieves it as a string. You may need to Parse the desired output if the value is an object stored as a string, e.g. parseInt(localStorage.getItem('key'));

Answer 2

There are several methods to achieve the same result: 1)Utilizing local storage, 2)session storage 3)service classes

Local Storage

Saving data into LocalStorage:

localStorage.setItem('key', value);

For objects with properties:

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

Retrieving From Local Storage:

localStorage.getItem('key');

For objects:

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

You can also utilize this code snippet to calculate remaining time

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

when necessary

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

Note:The value will persist even after reloading the page. 2)localStorage Object stores data as a string and retrieves it as a string. You may need to Parse the desired output if the value is an object stored as a string, e.g. parseInt(localStorage.getItem('key'));

Answer 3

Answer №2

When the application is reloaded, all variables and stack are reset. This means it's not possible to determine whether the user is visiting for the first time or just reloading the app.

To track this information, you can store a value in your database, use localstorage, or utilize session storage.

If you need to keep track while switching screens, you can achieve this by creating a service and defining the variable within it.

Upon the user's second visit to the page, you can simply check the stored value of the variable in the service.

Answer 4

When the application is reloaded, all variables and stack are reset. This means it's not possible to determine whether the user is visiting for the first time or just reloading the app.

To track this information, you can store a value in your database, use localstorage, or utilize session storage.

If you need to keep track while switching screens, you can achieve this by creating a service and defining the variable within it.

Upon the user's second visit to the page, you can simply check the stored value of the variable in the service.

Preventing setTimeout from repeating upon reload in Angular

Answer №1

Answer №2

Similar questions

What is the best way to invoke parent component methods from a child component?

Discovering objects nested within other objects

The enigma of the Angular2 Object's Undefined nature

Changing Databases in a NextJS Application using Mongoose

Issue with web form layout and heading malfunction

Looking for a way to manipulate the items in my cart by adding, removing, increasing quantity, and adjusting prices accordingly. Created by Telmo

What is the process for transforming a string literal type into the keys of a different type?

javascript - The onmessage event will not trigger when using a Java server

Converting a database query result into a JavaScript variable: A step-by-step guide

The functionality of JQuery ceases to function properly once the BxSlider plugin is activated

When I use Ajax to update my HTML, it causes Javascript to malfunction

Having trouble with JavaScript's Date.getUTCMilliSeconds() function?

Ways to eliminate additional data points on the x-axis in Highcharts

IE9 causing issues with Angularjs ng-route - views fail to display

Troubleshooting an Angular application

What is the method for obtaining multiple indices on an Array?

md-table - Adjusting the width of columns

Scope ng-repeat with Angular's $compile function is not functioning as expected

Can a rotation animation be incorporated into an image in next.js when it is clicked?

Verify the Javascript for file upload in ASP.NET folder prior to uploading it