クッキーの基礎固め：JavaScriptでクッキーを取得・設定・削除をマスター

2024-06-09

JavaScriptで名前を使ってクッキーを取得する方法

クッキーを取得するには、document.cookie プロパティを使用します。このプロパティは、セミコロン (;) で区切られたキーと値のペアの文字列を返します。

const cookies = document.cookie;
console.log(cookies);

このコードを実行すると、ブラウザに保存されているすべてのクッキーが表示されます。

名前でクッキーを取得する

特定の名前のクッキーを取得するには、以下のコードを使用します。

function getCookie(name) {
  const cookies = document.cookie;
  const nameStart = cookies.indexOf(name + '=');
  if (nameStart === -1) {
    return '';
  }
  const nameEnd = cookies.indexOf(';', nameStart + name.length + 1);
  if (nameEnd === -1) {
    return cookies.substring(nameStart + name.length + 1);
  }
  return cookies.substring(nameStart + name.length + 1, nameEnd);
}

const username = getCookie('username');
console.log(username);

このコードは、以下のことを行います。

document.cookie からすべてのクッキーを取得します。
nameStart 変数に、探しているクッキーの名前の開始位置を格納します。
クッキーの名前が見つからない場合は、空文字列を返します。
クッキーの値を返します。

例

以下の例は、username という名前のクッキーを取得して、その値をコンソールに表示します。

function getCookie(name) {
  // ... (上記と同じ)
}

const username = getCookie('username');
console.log(username);

このコードを実行すると、username クッキーの値が表示されます。

注意点

クッキーは、ブラウザの設定によって有効または無効にできます。クッキーが無効になっている場合は、document.cookie は空の文字列を返します。
クッキーは、ドメインとパスに制限されます。取得しようとしているクッキーが、現在のページと同じドメインとパスに設定されていることを確認してください。
クッキーは、セキュリティ上の理由から、JavaScript からアクセスできない場合があります。

function getCookie(name) {
  const cookies = document.cookie;
  const nameStart = cookies.indexOf(name + '=');
  if (nameStart === -1) {
    return '';
  }
  const nameEnd = cookies.indexOf(';', nameStart + name.length + 1);
  if (nameEnd === -1) {
    return cookies.substring(nameStart + name.length + 1);
  }
  return cookies.substring(nameStart + name.length + 1, nameEnd);
}

const username = getCookie('username');
console.log(username);

const count = getCookie('visit_count');
console.log(count);

getCookie 関数を作成します。この関数は、名前とクッキーの値を返します。
username クッキーと visit_count クッキーを取得します。
取得したクッキーの値をコンソールに表示します。

このコードを自由に試して、JavaScript でクッキーを操作する方法を学んでください。

追加の例

以下の追加例では、setCookie 関数を使用してクッキーを設定する方法を示しています。

function setCookie(name, value, expires = null, path = '/', domain = '') {
  let cookieString = name + '=' + encodeURIComponent(value);
  if (expires !== null) {
    const date = new Date();
    date.setTime(date.getTime() + expires * 1000);
    cookieString += '; expires=' + date.toUTCString();
  }
  if (path !== '') {
    cookieString += '; path=' + path;
  }
  if (domain !== '') {
    cookieString += '; domain=' + domain;
  }
  document.cookie = cookieString;
}

setCookie('username', 'John Doe');
setCookie('visit_count', 1);

setCookie 関数を作成します。この関数は、名前、値、有効期限、パス、ドメインを指定してクッキーを設定します。

JavaScriptでクッキーを取得するその他の方法

Cookies.get() メソッド (ES2015 以降)

ES2015 で導入された Cookies API は、より現代的で使いやすい方法でクッキーにアクセスを提供します。この API には、get() メソッドが含まれており、名前でクッキー値を取得できます。

const username = Cookies.get('username');
console.log(username);

このコードは、getCookie 関数で行ったのと同じことを行いますが、より簡潔で読みやすい構文になっています。

注: Cookies API は、古いブラウザではサポートされていないことに注意してください。サポート対象外のブラウザでは、従来の document.cookie プロパティと getCookie 関数を使用する必要があります。

サードパーティ製ライブラリ

js-cookie などのサードパーティ製ライブラリを使用して、クッキーを操作することもできます。これらのライブラリは、しばしば追加機能やユーティリティを提供し、コードをより簡潔にすることができます。

const Cookies = require('js-cookie');

const username = Cookies.get('username');
console.log(username);

このコードは、js-cookie ライブラリを使用して username クッキーを取得する方法を示しています。このライブラリを使用するには、まずそれをプロジェクトにインストールする必要があります。

document.querySelector() を使用する

特殊な状況では、document.querySelector() メソッドを使用して、特定のクッキーにアクセスできます。これは、クッキーの名前がわかっている場合にのみ使用できます。

const cookieElement = document.querySelector('[name="username"]');
if (cookieElement) {
  const username = cookieElement.value;
  console.log(username);
}

JavaScript でクッキーを取得するには、さまざまな方法があります。それぞれの方法には長所と短所があるため、状況に応じて最適な方法を選択する必要があります。