JavaScriptとCookieを利用して、「一度でもフォームの送信したことがあるかどうかを判別」する方法

JavaScriptとCookieを利用して、「一度でもフォームの送信したことがあるかどうかを判別」ついて説明しています。

Cookieを利用して一度でもフォームを送信したことがあるかを判別。

コロナ渦中での在宅勤務は週に何回ですか？

HTML <p>コロナ渦中での在宅勤務は週に何回ですか？</p>
<form id=”form” action=”thankans.html”>
<input type=”radio” name=”frequency”>週に3回以上<br>
<input type=”radio” name=”frequency”>週に2回以下<br>
<input type=”radio” name=”frequency”>すべて在宅勤務<br>
<input type=”radio” name=”frequency”>在宅勤務ではない<br>
<input type=”submit” name=”送信する”　id=”submit”><br>
</form>
<br>
<button id=”remove”>クッキー削除 | Cookie deletion </button>
</section>

HTML（thankyou.html) <section> <p>回答、ありがとうございました。| Thank you for your answer.</p> </section>

JavaScript <script src=”https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js”></script>
<script>
document.getElementById(‘form’).onsubmit = function(){
if(Cookies.get(‘answered’) === ‘yes’){
window.alert(‘回答済みです。アンケートの回答は1回しかできません。| you have already answered. You can only answer the questionnaire once. ‘);
return false;
} else {
Cookies.set(‘answered’, ‘yes’, {expires: 70});
}
};
document.getElementById(‘remove’).onclick = function(){
Cookies.remove(‘answered’)
};
</script>

解説

クッキーとはブラウザに保存される小さなデータのこと。クッキーのデータはブラウザとwebサーバーの間で送受信され、ECサイトやSNSサイトなどでユーザーのログイン情報を管理などに使われます。

クッキーには「変数名＝値」というかたちでデータが書き込まれており、今回の実習では「answered=’yes’」と保存されています。

「 <script src=”https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js”></script>」→　js-cookieライブラリはこちらからどうぞ。Click here for the js-cookie library.今回はCDNの下記よりURLをコピーして<script></script>に貼り付けて活用しております。

「 document.getElementById(‘form’).onsubmit = function(){～」→　フォームの送信ボタンをクリックすると処理を開始する。

「 if(Cookies.get(‘answered’) === ‘yes’){～　」　→　クッキーの変数「answered」に’yes’が保存されていれば次の処理がされます。cookies.getメソッドは、今回読み込んだjs-cookieライブラリが提供している機能で、()内にしていされたクッキーの値を読み取ります。

「 window.alert(‘～’);
return false;」→　条件式がtrueになったとき、アラートボックスを表示して、次のreturn falseでフォームの基本動作をキャンセルして、thankyou.htmlに移動しないようにしています。

「 Cookies.set(‘answered’, ‘yes’, {expires: 70});」→　cookies.setもjs-cookieライブラリが提供するメソッドで、クッキーにデータを書き込みます。()内のパラメータは’クッキー名’、’値’、{expires:有効期限}’となっています。クッキーのデータには有効期限があます。今回はクッキーの変数answeredは、最初にセットされてから70日間有効となります。

尚、有効期限を設定しなかった場合、クッキーのデータはブラウザを終了すると同時に消えます。また、「無期限」にすることはできないので、長期間有効にしたい場合は、10年後など指定します。

「 document.getElementById(‘remove’).onclick = function(){
Cookies.remove(‘answered’)」　→　一度テストで実行したら二度とできないのは不便ですから、「クッキー削除」ボタンがクリックされたら、Cookies.removeメソッドが実行されることにします。これもjs-cookieが提供するメソッドで、()内で指定するクッキーを削除します。

Chromeはローカルファイルのクッキーを操作できないようになっているため、Chrome以外のブラウザを使うか、ファイルをWebサーバーにアップロードする必要があります。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。