Cookie 入門、Cookieとは？、設定、危険性、js-cookieなども解説｜JavaScript入門（17）

JavaScript
2021.08.20
この記事は約6分で読めます。

はじめに

　JavaScript入門講座の第十七弾として、Cookie 入門、Cookieとは？、設定、危険性、js-cookieなどについて紹介します。

　この記事を読むと次の疑問について知ることができます。

  • Cookieとは？
  • Cookieの設定はどうするの？
  • Cookieの危険性（Cookieの削除方法）はどうなの？
  • JavaScriptによるCookieの書き込みと読み込みはどうするの？
  • js-cookieとは？

　JavaScript入門講座（16）では、Ajax 入門、Ajaxとは？、非同期通信、仕組、使い方について解説してきました。

　ここでは、Cookie 入門、Cookieとは？、設定、危険性、js-cookieなどについて深堀していきます。

Cookieとは？

　ショッピングサイトなどで、「買い物をする際に、Cookieを有効にしてください。」とでたりします。

　ポイントサイトでは、Cookeiを利用しているためにポイントサイトからのCookei情報をみて、ポイントの付加を決めています。

　例えば、カード発行などで、ブラウザーでカード発行の手続きをする際にもCookie情報が利用されており、ポイントサイトなどもカード発行がポイントサイトを見ているブラウザー上で実際に実施されているかのアクセス履歴などのCookieの情報をみてポイントを付加しています。

　このように、Cookieは色々な所で利用されているのは事実です。

　もう少し専門的に言うと、HTTP Cookieとも呼ばれ、Webサーバーとブラウザー間での通信で保持された情報のことで、ユーザ識別やセッション管理を行うために利用されます。

　Cookieの中身はテキストでてきた文字列であり、JavaScriptから読み出しや書き込みが行えます。

Cookieの設定

　Chromeブラウザーの場合は、右上の「縦三点」マーク⇒「設定」をクリックします。

　設定画面が開かれるので、「プライバシーとセキュリティ」の「Cokieと他のサイトデータ」をクリックします。

　全般設定で、「Cookieをすべて受け入れる」にチェックがはいて入ればOKです。

　iphone11のスマホの場合は、設定⇒「Safari」をタップして、「プライバシーとセキュリティ」の「すべてのCookieをブロック」のチェックを外し、OFFにすれば、Cookieが利用できるようになります。

Cookieの危険性（Cookieの削除方法）

 　Cookieには、クレジットカード情報、パスワード、ユーザー名、メールアドレスなどの情報が残ってしまいますので、共用で利用するようなパソコンや自分のパソコンでも人に貸すなどをすると、Cookie情報から大事な情報が盗まれる可能性があります。

　したがって、共用のパソコンなどを使う際には大事な情報などは入力しないようにすることが大事ですし、自分のパソコン、スマホなどは絶対に人に貸すなどのことはしないことです。

　　もしどうしても共用パソコンなどを利用する場合は、Cookie情報を消去することが情報漏洩の対策にもなります。

　パソコンなどでChromeブラウザーを利用している場合は、右上の「縦三点」マーク⇒「履歴」⇒「履歴」をクリックします。

　履歴画面で「閲覧履歴データの削除」をクリックします。

　「履歴データの消去画面」が表示されますので、期間の右横の「▼」をクリックすると、消去する期間（1時間以内、過去24時間、過去7日間、過去4週間、全期間）からどれかを選択して、「データを消去」をクリックします。

　iphone11の場合のCookieの消去は、設定⇒「Safari」をタップして、下にスクロールして「履歴とWebサイトデータを消去」⇒「履歴とデータを消去」をクリックすれば、Cookieの内容を消去できます。

JavaScriptによるCookieの書き込みと読み込み

　Cookieの読み書きなどは、Documntオブジェクトのcookieプロパティを利用します。

　書き方は、次のようになります。

document.cookie = "書き込む値や属性など";

ここで、書き込む値や属性には、次のものがります。

  • NAME=値
    必須項目、NAMEと値をセットで書きます。
  • expires=値
    Cookieの有効期限、省略可能、省略した場合は、ブラウザーが閉じた段階で消去
  • domain=値
    省略可能、Cookie を発行する Webサーバの名前を指定、省略した場合は Webサーバ名になります。
  • path=値
    指定したパス名にマッチするページを参照した時に、ブラウザは保存しておいた Cookie情報をサーバーに送ります。
  • secure
    サーバーとの接続が安全である時のみ、Cookie情報を送信

　ここで、簡単な名前とデータを書き込んでみましょう。

document.cookie = " Name1=Yamada"; // CookieにName＝Yamadaを書き込む。
document.cookie = " Name2=Suzuki"; // CookieにName＝Suzukiを書き込
console.log(document.cookie); // 上の2つNameは上書きされることなく両方ともコンソールに出力

js-cookie

　js-cookieは、jQueryのCookie用のプラグインでしたが、現在は単独で利用が可能となっています。

　これを利用すると、Cookieの取得、保存、削除が容易にできますし、オブジェクト形式のCookieも取得できたりします。

　利用するには、js-cookieのサイトからダウンロードして使う方法もありますが、ここでは試すのみですのでCDNによる方法を使って紹介します。

 下記のコードをHTMLのheadタグやbodyタグ内に入れて下さい。

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>

　使い方は、次のようにします。

  • Cookieの保存　：　Cookies.set()
    例）Cookies.set（”Name”、”値”）；
  • Cookieの取得　：　Cookies.get()
    例）let getName = Cookies.get("Name")；
  • Cookieの削除　：　Cookies.remove()
    例）Cookies.remove”Name”)；

　それでは、js-cookieを使って、保存、取得、削除をしてみましょう。

Cookies.set( "Name3", "UehAra");// CookieにName＝UehAraを書き込む。
console.log(document.cookie); //Cookieをコンソールに出力
// 出力結果 : Name1=Yamada; Name2=Suzuki; Name3=UehAra
let getName3=Cookies.get("Name3"); //Cookies.getでName3の値を取り出し、getName3に代入
console.log(getName3); //getName3の値をコンソールに出力
// 出力結果 ： UehAra
Cookies.remove("Name2");//Cookies.removeでName2を消去
console.log(document.cookie); //Cookieをコンソールに出力
// 出力結果 ： Name1=Yamada; Name3=UehAra

おわりに

　何だったでしょうか？

　Cookieとは？、Cookieの設定はどうするの？、Cookieの危険性（Cookieの削除方法）はどうなの？、JavaScriptによるCookieの書き込みと読み込みはどうするの？、js-cookieとは？などについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

タイトルとURLをコピーしました