Is there a way to store my countdown timer in a session storage to prevent it from resetting when the page is reloaded?

I have integrated the Countdown.js API into my JavaScript file, utilizing a variable called timer. 

var countDownCompleted = false;
var myCountdownTest = new Countdown({
    time: timer,
    width: 200,
    height: 80,
    onComplete: countdownComplete,
    rangeHi: "minute"
});
function countdownComplete() {
    countDownCompleted = true;
    window.location.href = 'index.php';
}

How can I make sure that the countdown does not reset when the page is reloaded? I am unsure about how to implement session storage.

javascriptcountdowntimersession-storage

Answer №1

Storing values in localStorage and sessionStorage is similar to using regular variables. To ensure your timer resumes from where it stopped when the page reloads, save the current value each time the timer decreases.

Upon reloading the page, you can verify if there is a stored value in localStorage and resume the timer from that point if one exists.

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

Showing the result of a backend script on the current page using PHP

I currently have a PHP web application that involves submitting data to a backend pipeline, also written in PHP. This pipeline consists of an external script that my application accesses using the 'exec' PHP function. The pipeline follows a multi ...

javascriptphpajaxbackend

Autofill Dropdown in AngularJS Using Data from Previous Page

Despite searching extensively on StackOverFlow, I was unable to find the answer I needed. So, I am posting my question below. I have a form that includes a dropdown menu. When a user clicks a button, they are taken to a new HTML page with additional infor ...

javascripthtmlangularjs

When using Chart JS, is there a way to create a line graph without including any labels at all?

Currently, I am facing a challenge with my Chart JS line graph. It needs to pull data from a backend and display it on a webpage. However, the chart has close to 1000 points to plot, making it impossible for me to provide labels for each point on both the ...

javascriptreactjschart.js

JavaScript xPath is ineffective at providing a return value

Trying to work through an issue with xPath and I am new to this concept. Any guidance or assistance in JavaScript would be greatly appreciated. Here is the simple HTML document that I have: <!DOCTYPE html> <html> <head> < ...

javascripthtmlxpath

Are the server updates not syncing with the client browser?

Is there a reason why server updates are not appearing on the client browser? Could it be that a specific attribute value needs to be modified or is this related to caching? app.get('/hello' , (_ , res) => { res.header({ 'Cach ...

javascriptexpressserverclientendpoint

Why does everything seem to move in sync with the table's scrolling?

I recently had an issue resolved that fixed most of my concerns: I needed to make three separate edits, and now when I reintroduce the other two edits, they are included within the table section and scroll along with the table instead of being stuck beneat ...

javascripthtmlcss

The efficiency of React Context API's setters is remarkably sluggish

I have a goal to implement a functionality where the background gradient of a page changes depending on whether the child's sublinks are expanded or collapsed. To achieve this, I am using the useContext hook. However, I've noticed that although e ...

javascriptreactjstypescriptstatereact-context

Obtain the value of an element from the Ajax response

Just starting out with Jquery and Ajax calls - here's what I've got: $(document).ready(function () { $.ajax({ type: "GET", url: "some url", success: function(response){ console.log(response); } }) }); Here's the ...

javascriptjqueryajax

Sharing JSON data between components securely without displaying it in the URL through routing

Seeking to pass JSON through routing URL, my code in app.route.ts looks like this: {path: 'calculator', component: CalculatorComponent,data : {some_data : null}}, The code used to route the data is as follows: this.router.navigate(['/home ...

javascriptangular

Error in React+Redux: Trying to access the "address" property of a null value is not permitted

I am new to using react and encountering an issue with my ecommerce app. The app runs smoothly until I log out and then log back in at the shipping address page, which triggers the following error: TypeError: Cannot read property 'address' of nu ...

javascriptreactjsreduxreact-redux

There appears to be an issue with the onmousemove function

I am currently troubleshooting an issue with a script that I wrote for my button. Interestingly, the code works flawlessly when I test it on CodePen, but I encountered an error when I attempted to run it in VSCode. Even after trying to recreate the script ...

javascripthtmlcss

An issue arises with the Datatables destroy function

Utilizing datatables.js to generate a report table on my page with filters. However, when applying any of the filters, the data returned has varying column counts which prompts me to destroy and recreate the table. Unfortunately, an error message pops up ...

javascriptdatatables

How to Use JQuery to Display Elements with a Vague Name?

Several PHP-generated divs are structured as follows: <div style="width:215px;height:305px;background-color: rgba(255, 255, 255, 0.5);background-position: 0px 0px;background-repeat: no-repeat;background-size: 215px 305px;display:none;position:fixed;top ...

javascriptjquery

Organize 15 employees into 3 separate groups

I need to organize 9 users into teams for a training session, with each team consisting of a maximum of 3 users. Additionally, I want every user to pair up with each other by the end of the training. Currently, I am utilizing expressjs var express = requ ...

javascriptnode.jsexpress

How can I use Grid List and Icon Button in Material UI as individual buttons with onClick functionality?

I've been experimenting with the grid list feature from the Material UI framework, found here: https://material-ui.com/components/grid-list/#grid-list-with-titlebars My current challenge involves adding onClick actions to both the GridListTile compon ...

javascriptreactjsmaterial-ui

Title of a property left `undetermined`

When dealing with a class, it is possible to retrieve the name of a defined property or function. For instance, the class name can be obtained using the following code snippet... console.log(`${this.constructor.name} is my name); Similarly, the name of a ...

javascriptreactjsecmascript-6

The ambiguity surrounding the timing of decorator invocation in TypeScript

My understanding was that decorators in TypeScript are invoked after the constructor of a class. However, I recently learned otherwise. For example, the primary response on this thread suggests that Decorators are called when the class is declared—not wh ...

javascriptangulartypescriptdecorator

Securing the Integrity of My JavaScript Code

As we all know, JavaScript EDIT can function as a client-side scripting language, meaning it runs on the client side for certain operations. This is especially true when using Node.js (which I currently am). I'm currently working on an app and utiliz ...

javascriptangularjsnode.jsobfuscation

Performing double string splitting with multiple separators in javascript

If I have a string like a.b.c.d#.e.f.g.h#.i.j.k.l and want to split it first by "#" and then by ".": str = a.b.c.d#.e.f.g.h#.i.j.k.l res = str.split("#") res[0] will contain a.b.c.d after the first split. Now, I need to further split this data. Is th ...

javascriptarrayssplit

What is the procedure for passing arguments to Google signIn in a NextJS backend?

I am currently working on implementing a role-based Google sign-in feature in a Next.js 13 app using next-auth. This setup involves calling two different tables to create users based on their assigned roles. For the database, I am utilizing mongodb/mongoo ...

javascriptreactjsnext.jsnext-auth