title: Timer with performance.now()
body: <p>I want to realize timer using <code>performance.now</code> because <code>Date.now</code> depends on users clock (<code>performance.now</code> doesn't), and "<code>Date.now</code>-way" may crash the timer, when user changes system clock.</p>
  
  <p>And I want to store timer in <code>localStorage</code>. When user close tab or browser and open it, timer have to resume. </p>
  
  <p><strong>Important condition</strong>: I want to take into account the time, when the browser/tab was closed. For example, user close browser, when timer value is 10 sec. After 10 sec user open the browser - timer value should be 20 sec.</p>
  
  <p>This is the problem, that I faced.</p>
  
  <p>This is code without using <code>localStorage</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const timerNode = document.getElementById('timer');
  const initialTimestamp = performance.now();
  
  setInterval(() =&gt; {
    const seconds = getSeconds(initialTimestamp);
    timerNode.innerHTML = seconds;
  }, 200);
  
  function getSeconds(initialTimestamp) {
    return Math.round((performance.now() - initialTimestamp) / 1000);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='timer'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any way to store timer in <code>localStorage</code> using <code>performance.now</code> and resume it in cases, that I mentioned above (and observing the condition)?</p>
  
  <p>Or maybe there is another way to get UNIX timestamp, that is not depends on system clock?</p>
  
  <p>To demonstrate problem with Date.now() run this code and  change system time, for example, set date to few days ago. You will see, that value of the timer is negative.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const timerNode = document.getElementById('timer');
  const initialTimestamp = Date.now();
  
  setInterval(() =&gt; {
   const seconds = getSeconds(initialTimestamp);
   timerNode.innerHTML = seconds;
  }, 200);
  
  function getSeconds(initialTimestamp) {
   return Math.round((Date.now() - initialTimestamp) / 1000);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='timer'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>