【javascript】10回まではリロードできるが11回目のリロードができないボタン

Question

下記のように10回押すと消えるボタン　および　ボタンを押すとリロードするボタンがあります。

<script type ="text/JavaScript">
var countDownValue = 10;
function countDown(){
    //カウンタから 1 を減算
    countDownValue--;
     console.log(countDownValue);
  if (countDownValue <= 0) {
//alert('10回越えた');
		document.getElementById("countd").setAttribute("disabled", true);
		document.getElementById("countd").style.color = "White";
  }
  return result;
}
</script>
<input type ="button" id="countd"  value="10回押すと消えるボタン" onclick ="countDown();">
<input type="button"  id="reload"  value="このページを再読込" onclick="window.location.reload();" />

やりたいこと

10回押すと消えるボタン上で同時にリロードもしたい。
=10回まではリロードできるが11回目のリロードができないボタンを作りたいです。

下記の4つを試しましたがうまくいきません。

<input type ="button" id="countd" value="10回押すと消えるボタン" onclick ="countDown();window.location.reload();"> <input type ="button" id="countd" value="10回押すと消えるボタン" onclick ="countDown(),window.location.reload();"> <input type ="button" id="countd" value="10回押すと消えるボタン" onclick ="window.location.reload();countDown();"> <input type ="button" id="countd" value="10回押すと消えるボタン" onclick ="window.location.reload(),countDown();">

いずれも最初の処理をするだけで2つ目の処理が出来ません。

次に「2つのボタンを同時に押すボタン」を作ってみました。

<script type ="text/JavaScript">
var countDownValue = 10;
function countDown(){
    //カウンタから 1 を減算
    countDownValue--;
     console.log(countDownValue);
  if (countDownValue <= 0) {
//alert('10回越えた');
		document.getElementById("countd").setAttribute("disabled", true);
		document.getElementById("countd").style.color = "White";
  }
  return result;
}
</script>
<input type ="button" id="countd"  value="10回押すと消えるボタン" onclick ="countDown();">
<input type="button"  id="reload"  value="このページを再読込" onclick="window.location.reload();" />


<input type="button"  id="countreload" value="2つのボタンを同時に押すボタン" onclick="test1(event)">
<script>
function test1(e){
	console.log(e.target);
    document.getElementById( "countd" ).click();
    document.getElementById( "reload" ).click();
	console.log(e.type); //click
}
</script>

上記だと、2つのボタンを同時に押すボタンを押すと
リロードボタンを押したことにはなりますが、10回押すと消えるボタンを押したことにはなりませんでした。
document.getElementById( "countd" ).click();
document.getElementById( "reload" ).click();
を上下変えてもやはりリロードしか認識してもらえません。

お願い
10回まではリロードできるが11回目のリロードができないボタンはどうすればいいかご教示願います。

Answer 1

ブラウザをリロードした場合、JavaScriptの変数はすべてリセットされます。

リロードを越えて状態を保持したい場合、Cookie、localStorage、sessionStorageといった仕掛けを使う必要があります。

Comments

[tajix_japan]

ありがとうございます。
当方のものを改造し、ローカルストレージに数値を置くことにより
下記で目的のものを作ることが出来ました。(冗長です)
一方でyambejpさんが同じくローカルストレージを使ってとても短いコードで
同じ目的を達成したものを作っていただきました。
ご指導有難うございます。

<input type="button" id="countreload" value="ローカルストレージに10を与える" onclick="start10(event)">
<script type ="text/JavaScript">
function start10(e){
var startValue = 10;
localStorage.setItem('countDownValueset', ''+startValue+'');
}
</script>

<script type ="text/JavaScript">
function countDown(){
//カウンタから 1 を減算
var countDownValueset_get = localStorage.getItem("countDownValueset");
var countDownValue = countDownValueset_get;
countDownValue--;
console.log(countDownValue);
var countDownValue00=countDownValue;
localStorage.setItem('countDownValueset', ''+countDownValue00+'');
var countDownValueset_get = localStorage.getItem("countDownValueset");
if (countDownValue <= 0) {
document.getElementById("reload").setAttribute("disabled", true);
document.getElementById("reload").style.color = "White";
document.getElementById("countd").setAttribute("disabled", true);
document.getElementById("countd").style.color = "White";
}
return result;
}
</script>
<input type ="button" id="countd" value="カウントダウンします" name ="bt1" onclick ="countDown();">
<input type="button" id="reload" value="このページを再読込します" onclick="window.location.reload();" />

<input type="button" id="countreload" value="2つを同時読み込み" onclick="test1(event)">

<script>
function test1(e){
console.log(e.target);
//<input type="button" value="ボタン1" onclick="test1(event)">
//alert('10回越えた');
document.getElementById( "countd" ).click();

document.getElementById( "reload" ).click();
console.log(e.type); //click
}
</script>

Answer 2

<script>
const countDownValue = 3;
window.addEventListener('pageshow',()=>{
  var flg=window.performance.navigation.type;
  if(flg==0) localStorage.count=0;
  if(flg==1) localStorage.count++;
  if(localStorage.count>=countDownValue){
    document.querySelector("#countd").disabled=true;
  }
});
</script>
<input type ="button" id="countd"  value="再読込/3回押すと消えるボタン" onclick="window.location.reload();">

Comments

[yambejp]

ただしボタンが消えたからと言って、リロードができないわけではありません

[tajix_japan]

有難うございます。
私もローカルストレージを使って作ってみたのですが、お話にならないくらい冗長なものでした。
こんなに短く作っていただき感謝です。
有難うございました!

>ただしボタンが消えたからと言って、リロードができないわけではありません

はい。使用場所は「スマートフォンアプリ」のフレームページ内にある別ページのリロードという形で使用します。

index.html (フレームページ) (リロードボタン付き)
　　ーinflamepage.html (内容ページ) (リロードボタンによりajaxを用い変化させる)

リロードボタンはフレームページの親ページ、変化するのはインラインフレーム内のページです。
アプリ使用において大元のフレームページからの遷移はありませんので、ブラウザ上のリロードボタンでのリロード、バックページによるリロード、いずれもできないと考えています。
もし、私の考えが甘い、または注意点などございましたらご教示いただけますと幸いです。
よろしくお願いいたします。

[yambejp]

スマホでインラインフレームの再読み込みができるかどうか、ということでしょうか？
ブラウザの仕様なのでなんとも言えないですね。

[tajix_japan]

ご丁寧に、ありがとうございます。