CodeGym/コース/Frontend SELF JA/クッキーの扱い

クッキーの扱い

使用可能

5.1 クッキーの基本的なプロパティ

クッキー (cookies) は、ウェブサイトがクライアント側(ユーザーのブラウザ)に保存できる小さなデータ片だよ。 20年前にlocalStorageより先に登場して、それ以来ずっと役立ってきたんだ。 今でもセッション情報、ユーザーの好み、トラッキングなどに頻繁に使われているんだ。

クッキーの基本的なプロパティ:

  1. 名前と値 (name=value): データを保持するキーと値のペア。
  2. ドメインとパス (domain, path): クッキーが適用されるURLやドメインを決める。
  3. 有効期限 (expires, max-age): クッキーが切れるときや削除されるときを決める。
  4. セキュリティ (secure, HttpOnly): クッキーがどのように、いつ送信されるかを指定する。

クッキーの設定

クッキーはJavaScriptやサーバーサイドのコードで設定できるよ。JavaScriptではdocument.cookieを使うんだ。

JavaScriptでのクッキー設定例:

JavaScript
document.cookie = "username=JohnDoe";

クッキーの追加パラメータ:

  • expires: クッキーの有効期限を指定する。期限が切れたらクッキーは削除される。
  • path: クッキーが有効なパスを決める。普通、サイト全体で使えるように/を設定する。
  • domain: クッキーが有効なドメインを決める。
  • secure: 設定されている場合、クッキーはHTTPSでのみ送信される。
  • HttpOnly: 設定すると、クッキーはJavaScriptからアクセスできず、サーバーサイドのみがアクセス可能。

追加パラメータを使ったクッキー設定例:

JavaScript
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

5.2 クッキーの管理

1. クッキーの読み取り

現在のドキュメントのすべてのクッキーは1つの長い文字列としてdocument.cookieに保存されている。 クッキーの値を取得するには、この文字列を解析する必要があるんだ。

クッキーの読み取り例:

JavaScript
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
}

// クッキー"username"の値を取得
const username = getCookie('username');
console.log(username); // 出力: JohnDoe

2. クッキーの更新

クッキーの値を更新するには、同じ名前で新しい値とパラメータを使って再設定するだけだよ。

クッキーの更新例:

JavaScript
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

3. クッキーの削除

クッキーを削除するには、期限切れの日付を設定する必要がある。

クッキーの削除例:

JavaScript
// 期限切れの日付を設定
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

5.3 クッキー操作の例

説明:

  • setCookie: 指定された名前、値、寿命(日数)でクッキーを設定する
  • getCookie: 指定された名前のクッキーの値を返す
  • deleteCookie: 指定された名前のクッキーを削除する

例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Cookie Example</title>
  </head>
  <body>
    <button onclick="handleSetCookie()">Set Cookie</button>
    <button onclick="handleGetCookie()">Get Cookie</button>
    <button onclick="handleDeleteCookie()">Delete Cookie</button>

    <script>
      function setCookie(name, value, days) {
        let expires = "";
        if (days) {
          const date = new Date();
          date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
          expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
      }

      function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(';');
        for (let i = 0; i < ca.length; i++) {
          let c = ca[i].trim();
          if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
      }

      function deleteCookie(name) {
        document.cookie = name + '=; Max-Age=0; path=/';
      }

      function handleSetCookie() {
        setCookie('username', 'JohnDoe', 7);
        alert('クッキー"username"に値"JohnDoe"を7日間設定しました');
      }

      function handleGetCookie() {
        const cookieValue = getCookie('username');
        if (cookieValue) {
          alert('クッキー"username"の値は: ' + cookieValue);
        } else {
          alert('クッキー"username"が見つかりません');
        }
      }

      function handleDeleteCookie() {
        deleteCookie('username');
        alert('クッキー"username"が削除されました');
      }
    </script>
  </body>
</html>

5.4 サーバーサイドでのクッキー設定

サーバーでのHttpOnlyとSecureクッキーの扱い(Node.js)を見てみよう。

例:

JavaScript
const express = require('express');
const app = express();

app.get('/setcookie', (req, res) => {
  res.cookie('secureServerCookie', 'ServerJohnDoe', {
    maxAge: 7 * 24 * 60 * 60 * 1000, // 7日間
    httpOnly: true,
    secure: true,
    sameSite: 'strict'
  });
  res.send('Secure server cookie set');
});

app.get('/getcookie', (req, res) => {
  const cookie = req.cookies.secureServerCookie;
  res.send(`Cookie value: ${cookie}`);
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

クッキーの使用例:

  1. 認証: クッキーは、ユーザーをリクエスト間で認証するセッショントークンの保存に頻繁に使われる。
  2. ユーザーの好み: クッキーは、インターフェイスの言語やテーマなどのユーザー設定を保存することができる。
  3. ユーザートラッキング: クッキーは、分析やコンテンツのパーソナライズのために、サイト上のユーザーの行動を追跡するために使用される。
1
タスク
Frontend SELF JA,  レベル 46レッスン 0
ロック未解除
クッキー: ユーザー名
クッキー: ユーザー名
1
タスク
Frontend SELF JA,  レベル 46レッスン 0
ロック未解除
クッキーの削除
クッキーの削除
コメント
  • 人気
  • 新規
  • 古い
コメントを残すには、サインインしている必要があります
このページにはまだコメントがありません