[ JavaScript 基礎 ] Cookieにデータを保存 / データの取得(参照)

ネットサーフィンをよくされる方は、Cookie(クッキー)というワードを聞くことも多いのではないかと思います。

Cookieとは、訪問したWebサイト(Youtubeや会社のホームページなど)から私たちが使用しているブラウザ(Google chromeなど)に保存されるデータのことを言います。

データの例としては、アクセスした履歴や訪問先のサイトで入力したデータ、ログイン情報などが挙げられます。

今回は、JavaScriptを用いて、Cookie(クッキー)にデータを保存する方法と保存したデータを参照する方法についてサンプルコードを用いながら解説していきます。

Cookieの仕様
Cookieにデータを保存する
Cookieに保存したデータを参照する
まとめ

Cookieの仕様

ブラウザ内に保存された情報(Cookie)は、ブラウザが自動的に該当のWebサーバーへ送信する。
Cookieの有効期限の設定が可能(30日間など)
自ら削除しない限りは、ずっと保持される(有効期限が設定されていない場合に限る)
ドメイン単位で保持するが、httpとhttpsの両方でアクセスが出来る場合は、別領域で保存されてしまうため注意する。

ドメインとは、URL ( https://utubou-tech.com/ ) の utubou-tech.com の部分を指します。

Cookieにデータを保存する

始める前の注意点

Google chromeは、ローカルからのcookieの操作は無効になっているため、コードが正しくても正常に動作しません。FirefoxやSafariでお試しください。本記事上ではGoogle chromeを使用しておりますが、サーバー上にファイルを置いたうえでファイルの実行を行っていますので、ローカル上でのファイルの実行は行ってません。

実行用のHTMLファイルとJSファイルを準備

HTMLファイル名は、cookie_sample.html とし、JSファイル名は、cookie_sample.jsとします。HTMLファイルの作成が完了したら以下のコードをコピペしましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie_js</title>
  </head>
  <body>
    <h1>Cookie Sample</h1>
    <button class="cookie_save">保存</button>
    <script src="./cookie_sample.js"></script>
  </body>
</html>

Cookieの保存

cookie_sample.jsを編集していきましょう。処理の流れとしては、保存ボタンをクリックしたらjsファイル内で指定したCookieをブラウザ上に保存するようにします。

cookieの保存

1
ボタン要素を取得
まずは、ボタン要素を取得します。
```
const cookie_save = document.querySelector('.cookie_save');
```

クリックイベントを設置

cookie_save.addEventListener("click", () => { });

ボタンがクリックされた際にcookieを保存する

cookieとしてデータを保存する際は、次のように書きます。

document.cookie = ‘key=値’;

cookie_save.addEventListener("click", () => { 
  // encodeURIComponent()で日本語をcookieとして操作可能な形式へ変換する
  document.cookie = 'name=' + encodeURIComponent('船橋');
  document.cookie = 'age=25';
  document.cookie = 'gender=men';
  // decodeURIComponent()を使うことで、日本語に戻す(元の状態に復元する)
  alert(decodeURIComponent(document.cookie));
});

encodeURIComponent()を用いて、日本語や特殊文字(, や=など)は、エンコードして記録するようにする。読みだす際に、decodeURIComponent()を使って、デコードする。

4
cookieとして保存したデータを確認してみる

HTMLファイルをブラウザで開き、保存ボタンを押下すると、以下のようなアラート表示が確認出来ます。赤枠で囲っているのが、cookieとして保存したデータです。

検証ツールで保存したデータを確認

ここまでですと、いまいちCookieとして保存されているといわれてもピンとこないかもしれません。

ブラウザの検証ツール(デベロッパーツール)で保存されたCookieの値を確認することが出来ますので、早速、先程保存したデータを確認してみましょう。

検証ツールでデータを確認

1
Applicatonタブを開く
以下の手順でデータをチェックしていきましょう。
1. Applicationタブを開く : 赤枠
2. Cookiesを選択 : 緑枠
3. 再読み込みを行う : 青枠
2
保存されたデータを確認

以下のようにデータが確認出来ればOKです。

Cookieに保存したデータを参照する

続いて、参照ボタンを押した際に、Cookieに保存したデータをHTML上から参照できるようにしてみようと思います。(処理はJavaScriptで行います。)

データの参照

1
HTMLファイルの編集
参照ボタンと参照するデータを表示するためのp要素を準備します。
```
<button class="cookie_read">参照</button>
<p id="show"></p>
```

データを整形するための関数を作成

// 保存されたデータを整形するための関数
const Convert = (cookies) => {

  // セミコロン(;)を区切り文字とし、分割する
  const cookie_value = cookies.split(';');

  // 空のオブジェクトを用意
  const js_obj = {};

  // オブジェクト内の要素を一つずつ取り出す
  cookie_value.forEach((item) => {

    // イコール(=)を区切り文字とし、分割する
    let s = item.split('=');
    
    // キーを取得(name, age, gender)
    const key = s[0].trim();

    // 値を全てデコードし、取得
    const v = decodeURIComponent(s[1]);
    js_obj[key] = v;
   });
  return js_obj;
}

各種変数や定数で取得している値については、DEMOページ上で検証ツールを開き、Consoleから確認して頂くことが可能です。

Cookie_js

3
参照ボタンを押した際の処理を記述
```
const cookie_read = document.querySelector('.cookie_read');
cookie_read.addEventListener("click", () => {

  // Convert関数を呼び出し、整形後のデータを格納する
  const ob = Convert(document.cookie);
  console.log(ob);

  // JSON形式の文字列へ変換し、HTMLへ渡す
  document.getElementById("show").innerHTML = JSON.stringify(ob, null, "    ");})
```
JSON.stringifyメソッドは、JavaScriptのオブジェクトをJSON形式の文字列に変換することが出来るメソッドになりますが、3つの引数を設置することが可能です。

第一引数が変換するJavaScriptのオブジェクトで、第二引数がコールバック関数や配列, 第三引数は、余白、空白の設定になります。

基本的な使い方については以下をご覧ください。

404 NOT FOUND | ウツボウTECH
Webサイト制作・Webアプリ開発に加え、クリエイティブな技術に関する情報を配信していきます。
utubou-tech.com

JSON.stringify() - JavaScript | MDN
JSON.stringify() メソッドは、ある JavaScript のオブジェクトや値を JSON 文字列に変換します。置き換え関数を指定して値を置き換えたり、置き換え配列を指定して指定されたプロパティのみを含むようにしたりすることもできます。
developer.mozilla.org
4
動作確認

以下のように参照ボタンを押下し、Cookieに保存したデータをがJSON形式の文字列で取得されていればOKです。

DEMO(こちらで動作確認が可能です。)

Cookie_js
varth0251.xsrv.jp