Tips for preventing countdown from resetting when you refresh the page

Question

Tips for preventing countdown from resetting when you refresh the page

I'm currently using a countdown feature on my Shopify website that is functioning well, except for one issue - whenever the page is refreshed, the countdown resets itself. Can anyone provide guidance on how to solve this problem? Thank you in advance!

Below is the code snippet that I am using:

<style>#progress_bar{margin-top:15px}.progressbar.progressbar{background:#ffe8e8;border:0px solid whitesmoke;height:11px}.progressbar.progressbar div{background:#d95350;height:11px}{border-radius:16px}.progressbar.progressbar.active div{-webkit-animation:2s linear 0s normal none infinite running progress-bar-stripes;animation:2s linear 0s normal none infinite running progress-bar-stripes}.progress-striped.progressbar.progressbar div{background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg...

javascript jquery html css shopify

Answer 1

Answer №1

To accomplish this task, utilize the power of SessionStorage. Save the count for each day, hour, minute, and second in SessionStorage using the web storage API.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Upon reloading the page, retrieve the values stored in sessionStorage. If they are not found, resort to the default values extracted from the Date() function.

You can test the functionality by running the stack snippet provided below. Please note that due to security restrictions, the 'sessionStorage' property cannot be accessed in the stack snippet environment as it requires the 'allow-same-origin' flag.

Therefore, I have added comments to the code and adjusted the if conditions for demonstration in a real environment. In the snippet below, it's:

if (false && sessionStorage)

When implementing this code in your browser, modify these if conditions to: if (sessionStorage) This will demonstrate the retention of the counter value upon page refresh.

... [code snippets and additional instructions continue]

Answer 2

To accomplish this task, utilize the power of SessionStorage. Save the count for each day, hour, minute, and second in SessionStorage using the web storage API.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Upon reloading the page, retrieve the values stored in sessionStorage. If they are not found, resort to the default values extracted from the Date() function.

You can test the functionality by running the stack snippet provided below. Please note that due to security restrictions, the 'sessionStorage' property cannot be accessed in the stack snippet environment as it requires the 'allow-same-origin' flag.

Therefore, I have added comments to the code and adjusted the if conditions for demonstration in a real environment. In the snippet below, it's:

if (false && sessionStorage)

When implementing this code in your browser, modify these if conditions to: if (sessionStorage) This will demonstrate the retention of the counter value upon page refresh.

... [code snippets and additional instructions continue]

Answer 3

Answer №2

I have developed something similar to the following:

//<![CDATA[
/* js/external.js */
let doc, html, bod, I, SessionCounter; // for use on other loads
addEventListener('load', ()=>{
doc = document; html = doc.documentElement; bod = doc.body;
I = id=>doc.getElementById(id);
SessionCounter = function(init = 0, inc = 1, dec = 1){
  if(sessionStorage.count === undefined){
    sessionStorage.count = init;
  }
  this.count = +sessionStorage.count;
  this.inc = (by = inc)=>{
    this.count += by; sessionStorage.count = this.count;
    return this.count;
  }
  this.dec = (by = dec)=>{
    this.count -= by; sessionStorage.count = this.count;
    return this.count;
  }
}
// you can put the following on another page using a load Event - besides the end load
const dec = I('dec'), test = I('test'), inc = I('inc');
sc = new SessionCounter;
test.textContent = sc.count;
dec.onclick = ()=>{
  if(sc.count > 0)test.textContent = sc.dec();
}
inc.onclick = ()=>{
  test.textContent = sc.inc();
}
}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%; background:#ccc;
}
.main{
  padding:10px;
}
#inc,#dec{
  width:20px;
}
#test{
  display:inline-block; width:70px; background:#fff; text-align:center;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <div>
      <input id='dec' type='button' value='-' />
      <div id='test'></div>
      <input id='inc' type='button' value='+' />
    </div>
  </div>
</body>
</html>

Answer 4

I have developed something similar to the following:

//<![CDATA[
/* js/external.js */
let doc, html, bod, I, SessionCounter; // for use on other loads
addEventListener('load', ()=>{
doc = document; html = doc.documentElement; bod = doc.body;
I = id=>doc.getElementById(id);
SessionCounter = function(init = 0, inc = 1, dec = 1){
  if(sessionStorage.count === undefined){
    sessionStorage.count = init;
  }
  this.count = +sessionStorage.count;
  this.inc = (by = inc)=>{
    this.count += by; sessionStorage.count = this.count;
    return this.count;
  }
  this.dec = (by = dec)=>{
    this.count -= by; sessionStorage.count = this.count;
    return this.count;
  }
}
// you can put the following on another page using a load Event - besides the end load
const dec = I('dec'), test = I('test'), inc = I('inc');
sc = new SessionCounter;
test.textContent = sc.count;
dec.onclick = ()=>{
  if(sc.count > 0)test.textContent = sc.dec();
}
inc.onclick = ()=>{
  test.textContent = sc.inc();
}
}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%; background:#ccc;
}
.main{
  padding:10px;
}
#inc,#dec{
  width:20px;
}
#test{
  display:inline-block; width:70px; background:#fff; text-align:center;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <div>
      <input id='dec' type='button' value='-' />
      <div id='test'></div>
      <input id='inc' type='button' value='+' />
    </div>
  </div>
</body>
</html>

Tips for preventing countdown from resetting when you refresh the page

Answer №1

Answer №2

Similar questions

The calendar on the Datetimepicker is not appearing in the proper position

What are the steps for modifying the JSON data format in AngularJS?

Challenges with jQuery: Appending strings to a dynamically selected element

Error in Highcharts: The property '0' is undefined and cannot be read

Why won't the code for detecting the DEL key in a textarea work on my computer?

Is it possible to modify the CSS of a single class when hovering over a child class of a different and unrelated class?

Implementing Image Data in AngularJS: A Guide to Binding Images to IMG Tags

Tips for resolving the issue of 'no serverless pages built' during deployment of a Next.js application on Vercel

Changing the color of placeholder text in MUI 5 TextField

Is there a way to reference an image in the ROOT/app/assets/images directory prior to precompilation?

Tips for specifying headings for a particular div ID

Is the Messenger Bot ignoring random users?

Animating components when they first mount in React

Performing string replacement on an Ajax response prior to adding it to the document

Ways to make a div adjust to the width of its content

The input type file is not correctly inserting an image into the image tag

SSR with Material UI Drawer encounters issue during webpack production build meltdown

Cross-Browser Compatibility of CSS

Scroll overflow can be hidden

Tips for retrieving the chosen value from an ajax.net ComboBox using javascript