Ways to troubleshoot issues with localstorage in Angular

How can I resolve this issue? I'm attempting to log the elapsed and remaining time when reloading, but I keep encountering an error:

Error: Argument of type 'number' is not assignable to parameter of type 'string'.

The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

An argument for 'value' was not provided.

Below is the complete code sample:

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 < 0 ? 1000 : duration;
    localStorage.setItem('DURATION', DURATION);
        localStorage.setItem('start', Date.now());
    
        const elapsed = Date.now() - localStorage.getItem('start');
        const remaining =  localStorage.setItem('DURATION')
    
  setTimeout(() => {
  }, DURATION)

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

In addition to resolving the errors above, my goal is to display the LIST data without repetition when opening or refreshing the application. Adding new data using addData() should trigger initializeAlertTimer() to display the latest information.

Answer №1

Give this a shot -

let timePassed = new Date().getTime() - (+localStorage.getItem('start'));

Answer №2

Storing only string values in localStorage is a common practice. Give this a shot:

localStorage.setItem('timestamp',JSON.stringify(Date.now()));

Afterwards, you can retrieve the elapsed time like so:

const duration = Date.now() - JSON.parse(localStorage.getItem('timestamp'));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage the power of Angular UI Bootstrap to create an interactive Carousel Form

Is it possible for someone to create a custom ui.bootstrap carousel with a manual sliding button, along with two divs containing content? I'm having trouble understanding how to implement carousels based solely on their provided example in the documen ...

Experiencing issues with transferring JSON response from Axios to a data object causing errors

When I try to assign a JSON response to an empty data object to display search results, I encounter a typeerror: arr.slice is not a function error. However, if I directly add the JSON to the "schools" data object, the error does not occur. It seems like th ...

The presence of JavaScript within PHP-echo goes largely unnoticed

On my webpage, I have a form with action="register.php" and a <p id="slogan">. My goal is for the PHP code in register.php to modify the content of the <p> by using JavaScript to echo it. Despite this intention, the paragraph on my HTML page r ...

What steps can be taken to hide empty items in a list from being shown?

When I map over an array of books to display the titles in a list, I encounter an issue with the initial empty string value for the title. This causes the list to render an empty item initially. Below is my book array: @observable books = [ {title:" ...

What is the best way to view an image before sending it to the server?

My form for adding products to the online store has several fields: Product Name Product Code Product Description Product Price Product Image I would like the user/admin to be able to select an image using ...

Importing and viewing an Excel spreadsheet containing images in a specific column

I am currently working on an Angular project where I am implementing a feature to upload an excel file. The excel file contains text data in one column, and another column specifically contains images labeled as D1, D2, D3, and so on. While attempting to ...

Converting (Geo)JSON data into an array of objects

I am new to JavaScript and facing some difficulties in converting GeoJSON to a JavaScript Object Array. Using JSON.parse, I successfully parse the JSON generated on the server into a JSON Object. The addGeoJson method from Google returns [object (Array)] ...

Substituting characters, backslashes, and double quotes may not function properly

Trying to replace a single backslash \ with two \\, but encountering issues with double quotes. var json = { "DateToday": "2021-08-11", "MetaData": [ { "id": "222" ...

Unusual class title following npm packaging

Currently, I am working on developing a Vue 3 library with TypeScript. We are using Rollup for bundling the library. Everything works as expected within the library itself. However, after packing and installing it in another application, we noticed that th ...

Creating an uncomplicated search bar that dynamically adjusts values based on its function

Summing it up, there is a div situated within my app.component.html: <div class="col-lg-6 search-div"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-b ...

Submit JSON data that is not empty in the form of a custom format within the query string

Attempting to transmit JSON data using a GET request. JSON data: var data = { country: { name: "name", code: 1 }, department: {}, cars: ["bmw", "ferrari"], books: [] } Code for sending: var posting = $.ajax({ ur ...

Eliminate redundant entries from an Ionic3 array

Looking for a solution to eliminate duplicate values in the storage array within Ionic3 this.storage.get('thestations').then((val) => { for(let i =0;i<val.length;i++){ if(this.newarray.indexOf(this.newarray) == -1) ...

Method for implementing mock values with observables in Angular

I have successfully implemented the following code to call an API. However, I now want to return a true value instead of calling the API. Strangely, when I try to return true, an error is thrown. export interface EmployeeStatus{ hasActive: boolean; } ...

When attempting to call the event outside of the component, the functionality of the event in VUE.js does not work

Currently, I am working on a small product page following the guidelines from this Vue.js tutorial. The page consists of a product component which includes an "add to cart" button. However, the actual cart is located outside the component in index.html, so ...

Creating a rotating circle in CSS with ion-slides: A step-by-step guide

Hello, I am attempting to develop a circular object that will rotate in the direction it is dragged. Within this circle, there are elements positioned along the border so that these elements also spin accordingly. To illustrate, below are the specific elem ...

Is it possible to manipulate div elements with JavaScript while utilizing node.js?

It seems like I'm missing something obvious here, as I'm working with node.js and I have correctly linked a javascript file (alert("hello"); works). However, I can't seem to make any changes to the DOM. Here's a simple example: jade: ...

"Utilize a specific parameter in the npm run script for enhanced

Is it possible to pass a named parameter to an npm run script in order to achieve the following functionality? "scripts":{ "say-hello":"echo $greeting && ls" } npm run hello --greeting=hello The desired outcome is to replace the $greeting ...

Adjust the width of a container as its children expand

My current project involves creating a dynamic gallery using JavaScript and jQuery, where full-sized images slide out from the right side. I have successfully implemented this functionality, but now I am facing a new challenge. I need the parent block of t ...

AngularJs Resource provides the functionality to pass optional parameters through the URL

Currently, I am utilizing this type of resource: var Products = $resource('companies/:companyId/products') However, the issue arises when I attempt to access the products from all companies via the URL companies/products. Instead of receiving the ...

Step-by-step guide to adding products to your Supabase shopping cart

I have managed to insert a row into the "order" table with user information. Now, I want to individually add item details to a separate table named "order_storeItems" to create a relationship between the order and storeItems tables. I attempted using Pro ...