JavaScript

Cookieを利用して一度でもフォームを送信したことがあるかを判別。| Determine if you have submitted the form even once using cookies.

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

週に3回以上
週に2回以下
すべて在宅勤務
在宅勤務ではない

クッキー削除 | Cookie deletion

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サイトなどでユーザーのログイン情報を管理などに使われます。| A cookie is a small piece of data stored in your browser. Cookie data is sent and received between the browser and the web server, and is used for managing user login information on EC sites and SNS sites.

クッキーには「変数名＝値」というかたちでデータが書き込まれており、今回の実習では「answered='yes'」と保存されています。| Data is written in the cookie in the form of "variable name = value", and in this training, it is saved as "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>に貼り付けて活用しております。| This time, I copy the URL from the following on the CDN and paste it into <script> </script >

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

「 if(Cookies.get('answered') === 'yes'){～　」　→　クッキーの変数「answered」に'yes'が保存されていれば次の処理がされます。cookies.getメソッドは、今回読み込んだjs-cookieライブラリが提供している機能で、()内にしていされたクッキーの値を読み取ります。| If'yes' is saved in the cookie variable "answered", the following processing is performed. The cookies.get method is a function provided by the js-cookie library loaded this time, and reads the value of the cookie in ().

「 window.alert('～');
return false;」→　条件式がtrueになったとき、アラートボックスを表示して、次のreturn falseでフォームの基本動作をキャンセルして、thankyou.htmlに移動しないようにしています。| When the conditional expression becomes true, an alert box is displayed, and the following return false cancels the basic operation of the form so that it does not go to thankyou.html.

「 Cookies.set('answered', 'yes', {expires: 70});」→　cookies.setもjs-cookieライブラリが提供するメソッドで、クッキーにデータを書き込みます。()内のパラメータは'クッキー名'、'値'、{expires:有効期限}'となっています。クッキーのデータには有効期限があます。今回はクッキーの変数answeredは、最初にセットされてから70日間有効となります。| cookies.set is also a method provided by the js-cookie library that writes data to cookies. The parameters in parentheses are'cookie name','value', {expires: expiration}'. Cookie data has an expiration date. This time the cookie variable answered is valid for 70 days after it is first set.

尚、有効期限を設定しなかった場合、クッキーのデータはブラウザを終了すると同時に消えます。また、「無期限」にすることはできないので、長期間有効にしたい場合は、10年後など指定します。| If you do not set an expiration date, the cookie data will be deleted as soon as you close the browser. Also, it cannot be set to "indefinitely", so if you want to make it valid for a long period of time, specify 10 years later.

「 document.getElementById('remove').onclick = function(){
Cookies.remove('answered')」　→　一度テストで実行したら二度とできないのは不便ですから、「クッキー削除」ボタンがクリックされたら、Cookies.removeメソッドが実行されることにします。これもjs-cookieが提供するメソッドで、()内で指定するクッキーを削除します。| It's inconvenient to run it once in a test and never again, so when the "Delete Cookies" button is clicked, the Cookies.remove method will be executed. This is also a method provided by js-cookie, which deletes the cookie specified in ().

Chromeはローカルファイルのクッキーを操作できないようになっているため、Chrome以外のブラウザを使うか、ファイルをWebサーバーにアップロードする必要があります。| Chrome doesn't allow you to manipulate cookies for local files, so you'll need to use a browser other than Chrome or upload the file to your web server.

私は人から丁寧に教わりたい、という人にはこちらもどうぞ。

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー