SAMURAI TERAKOYA

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

JavaScript

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

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

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

今回は、JavaScriptを用いて、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');

  • 2
    クリックイベントを設置

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

  • 3
    ボタンがクリックされた際に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として保存したデータです。

    js-cookie-alert

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

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

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

検証ツールでデータを確認
  • 1
    Applicatonタブを開く

    以下の手順でデータをチェックしていきましょう。

    1. Applicationタブを開く : 赤枠
    2. Cookiesを選択 : 緑枠
    3. 再読み込みを行う : 青枠

    js-devloptool-application

  • 2
    保存されたデータを確認

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

    cookie-dev-data

 

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

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

データの参照

まとめ

  • 訪問したサイト(閲覧したWebサイト)からPC内のブラウザに保存されるデータのことをCookie(クッキー)という
  • JavaScriptでは、document.cookieに保存した値を代入することで、Cookieへデータを保存することが可能
  • localStorageは、様々なデータを保存できるが、Cookieは1次元の文字列のみしか保存が出来ない。
  • Cookieは、クライアントサイドでもサーバーサイドでも共有可能なため、どちらでも書き換えができる。

コメント

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