javascript（jQuery）を使って、htmlで減算する人数制限表示を作りたい

Question

ただいま以下のような要素で、人数制限をカウント減算するプログラムを作っているのですが、ページロードする度、数字が初期値に戻ってしまい苦戦しています。

<p class="remainder">本日は残り<span id="remainder">15</span>名まで</p>
<a id="submitBtn">クリック</a>

<script><!-- footer下部に記載 -->
var limit = 15;
$('#submitBtn').click(function(){
	if(limit >= 2){
		limit--;
		document.getElementById('remainder').innerHTML = limit;
	};
});
</script>

a要素のクリックボタンを押していくと１ずつ数字が減っていき、最終的に1名で止まるようになったのですが、ブラウザをリロードすると数字が変数の初期値に戻ってしまいます。
そのためscript部分を以下のように書き換えましたが、まったく動作してくれません。

<script><!-- footer下部に記載 -->
var limit = document.getElementById('remainder');
$('#submitBtn').click(function(){
	var limitNum = Number(limit);
	if(limitNum >= 2){
		limitNum - 1;
		document.getElementById('remainder').innerHTML = limitNum;
	};
});
</script>

現在の環境はWordpress 4.7.5
jquery 1.12.4
テーマはXeory extension 0.2.1を使用しております。
記法が分からず手探りでやっております。ご指摘いただける部分があればよろしくお願い致します。

Answer 1

リロードする、ということは、HTMLの読み込みを最初からやり直すことになるので、HTML上に保持し続けることはできません

値を保持する方法にはcookieや、secondさんの示されたようにローカルストレージを使う方法などがあります

ただし、ある人のＰＣのブラウザで変化した値を別の人のＰＣのブラウザに渡すことはできません

「本日は残り～名まで」という文言から察するに、そのカウントダウン値は不特定多数の人へ知らせることを想定されていますか？
もしそうであるなら、それを実現したい場合はサーバ側で値を受け取ってＤＢに格納し、ページ表示時にＤＢから値を読み取ってページに埋め込むような仕組みが必要になります

Comments

[ttaison]

おっしゃるとおりで、不特定多数のユーザーを想定しています。
そうなるとデータベースも織り交ぜた形で内容を考えていく必要がありそうですね。
もう少しデータ保持について調べてみようかと思います。
ありがとうございます！

Answer 2

javascriptの変数やdomの情報はページを離れても保持されるものではありません。

そのため、データベースやユーザーのブラウザに保存するようにしなければなりません。

LocalStorageを使うと、簡単に実装することはできます。

https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

localStorage.setItem('counter', limitNum);// 保存
limitNum = localStorage.getItem('counter');// 取得

こんな感じです。

Comments

[kei344]

LocalStorageでは「回数制限」は出来ますが「人数制限」は出来ないと思いますよ。

[second]

確かにそうですね。
または「クリックボタンを押していくと１ずつ数字が減っていき」と書いていることから、それは許容する仕様なのかもしれません。

[ttaison]

こんなものがあったのですね。ありがとうございます。
今回の仕様としては、問い合わせの送信ボタンをイベント発火装置にして、表示される数字の切り替えができれば。と思ったのですが、、、
データの保持を考えるといろいろと複雑になりそうですね　汗