'Same Counter on different HTML Pages (Local)

I need your help beause I struggle at the following problem.

What I want:

  • I want to have an Counter (60 minutes to 0 minutes) //Works!
  • I have a lot of local .html Pages which are connected with buttons
  • If I go to another HTML Page, I want to use the same counter. Currently the timer starts on each HTML page by itself
  • I don`t use a server, its just HTML, CSS (+ Bootstrap) and JS

================================================== HTML Page 1 with the name "1.0_Flur-1.html":

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>ER</title> <!-- Tab-Name -->

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->

</head>



<body>

<br> <!-- nächste Zeile -->
<br> <!-- nächste Zeile -->
<div class="container"> <!-- START div container -->

<div class="jumbotron">
    

<!-- Navigation -->
<center>
  <a class="btn btn-primary btn-lg" href="1.1_Rote-Tuer.html" role="button">&#9664; Links</a>
  <a class="btn btn-primary btn-lg" href="1.2_Flur-2.html" role="button">&#9650; Vorwärts</a>
  <a class="btn btn-primary btn-lg" href="1.3_Blaue-Tuer.html" role="button">Rechts &#9654;</a>
</center>
<br> <!-- nächste Zeile -->

<!-- Bild einfügen -->
<center>
<img src="images/Flur1.png" width="1000" height="500"> <!-- Quelle: Eigene Darstellung -->
<br> <!-- nächste Zeile -->
</center>

<br><!-- nächste Zeile -->
<!-- Text einfügen -->
<center>
<p>So viele Räume...</p>      
</center>

<!-- Navigation -->
<center>
  <a class="btn btn-primary btn-lg" href="1.0_Notizbuch.html" role="button">Notizbuch</a>
</center>
<br> <!-- nächste Zeile -->


<!-- Timer Script einbinden -->
<script>
if(localStorage.getItem("count_timer")){
var count_timer = localStorage.getItem("count_timer");
} else {
    var count_timer = 60*0.2;
}
var minutes = parseInt(count_timer/60);
var seconds = parseInt(count_timer%60);
function countDownTimer(){
    if(seconds < 10){
        seconds= "0"+ seconds ;
    }if(minutes < 10){
        minutes= "0"+ minutes ;
    }
    
    document.getElementById("total-time-left").innerHTML = "Time Left : "+minutes+" Minutes "+seconds+" Seconds";
    if(count_timer <= 0){
         localStorage.clear("count_timer");
         document.location.href="7.1_EndeGescheitert.html";
    } else {
        count_timer = count_timer -1 ;
        minutes = parseInt(count_timer/60);
        seconds = parseInt(count_timer%60);
        localStorage.setItem("count_timer",count_timer);
        setTimeout("countDownTimer()",1000);
    }
}
setTimeout("countDownTimer()",1000);
</script>
<!-- Timer Script einbinden --> 
<div id="total-time-left" align="right"> </div>

</div> <!-- ENDE div container -->



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>

==================================================

I tried to work with local Storage but it does not work on my side. Maybe some of you out there have some ideas for me. Thank you very much indeed.

javascripthtmltimercounterlocalc#stack-overflow


Solution 1:[1]

I just copied / pasted your code in two local HTML files and your code seems to be running like it should, unless I didn't understood your request.

However, the problem is that you set your default timer like this:

var count_timer = 60*0.2;
// 60s x 0,2 = 12s

But it should be like this:

var count_timer = 60*60;
// 60s x 60m = 1h

EDIT:

It seems your problem is linked to the way Firefox is handling localStorage for local files. When you set something in the localStorage, it's being set under your domain, so only your own website can access it.

Chrome is using a "shared" localStorage for local files by settings the keys / values under the "file://" domain. So every HTML file on your computer can access the same keys / value.

However, Firefox is setting them under the "file:///path/to/my/file.html" domain. This means every local file has a different localStorage, as they are not on the "same domain" because they have a different name.

In conclusion, there no real "bug", it's more likely that Chrome and Firefox have made a different choice over the way to handle localStorage for local files (unless one of them has introduced a bug causing this).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions