Why is the date object acting correctly in one instance but not the other?-CodePudding

I have a problem I cant wrap my head around. The Date string is acting different in two instances where I think I am doing the same thing.

SO in essence, when I assign new Date("Jan 25, 2023 15:37:25").getTime() to countDownDate, the timer here (controlled by setInterval), will start where I expect it based on the string literal that is input into the date constructor. This will persist to count even on refresh.

The problem is when I need to calculate a future time dynamically. ALl of a sudden, when I calculate a dynamic future time string:

    var timer = new Date().getTime()   620840000;
    var date = new Date(timer);
    var dateStr = date.toString();
    var countDownDate new Date(dateStr).getTime()

this no longer persists on refresh.

Now I am aware that in general you need to store the time in localstorage or even a server to allow the time to persist. which makes sense. I also understand that the timer is being recalculated every time the component is mounted. However, arent I doing the same exact thing by putting a static string literal into the date constructor? If its a matter of setting and resetting, shouldnt the date constructor with the string literal act the same way as a dynamically calculated string? pull

code here: https://github.com/Cerezze/timerTest

import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';

function App() {

  useEffect(() => {
    var timer = new Date().getTime()   620840000;
    var date = new Date(timer);
    var dateStr = date.toString();

    var countDownDate = new Date("Jan 25, 2023 15:37:25").getTime(); // <-- Why does this persist on refresh
    /*var countDownDate new Date(dateStr).getTime();*/               // <-- and this does not persist on refresh?
    
    const interval = setInterval(() => {
      var now = new Date().getTime();

      var distance = countDownDate - now;

      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      console.log(days, hours, minutes, seconds); 
    }, 1000);
    return (distance) => {
        if(distance < 0){
        clearInterval(interval);
        console.log('Expired');
      }
    }
  }, []);

  return (
    <div className="App">
    </div>
  );
}

export default App;

CodePudding user response：

If I understand your question, then the answer is that here

var timer = new Date().getTime()   620840000;

you are creating a different date/time every time your javascript runs (new Date() will always be the present time according to the system clock)

var date = new Date(timer);
var dateStr = date.toString();

but here, you have a fixed date/time, which stays the same each time.

var countDownDate = new Date("Jan 25, 2023 15:37:25").getTime(); // <-- Why does this persist on refresh

Does that answer your question? I would have put this in a comment, but I wanted to show you in your code where I think your misunderstanding is