JavaScript Cookie：ガイド

クッキーはおいしいおやつであり、現代のウェブサイトの重要な部分です。

Cookieを使用すると、ユーザーに関するデータをWebブラウザーに保存できます。多くの場合、Cookieには認証セッションなどの情報が保存されるため、ブラウザはWebページにログインしたことを記憶します。

このガイドでは、Cookieが存在する理由、Cookieの種類、JavaScriptでのCookieの使用方法について説明します。始めましょう！

ブラウザCookieとは何ですか？

Cookieは、ユーザーに関する情報をブラウザに保存するテキストの文字列です。このアイデアは、1990年代に世界で最も人気のあるブラウザの1つを開発したNetscapeによって開拓されました。 Netscapeは、ユーザーがすでに自分のサイトにアクセスしたかどうかを追跡するためにCookieを開発しました。もしそうなら、それはおそらくユーザーがNetscapeについて何か知っていることを意味しました。

Cookieには、少なくとも名前と値のフィールドが含まれている必要があります。名前フィールドは、値フィールドの内容を識別するために使用されます。 Cookieは、アプリケーションでCookieをどのように使用しているかに応じて、ファイルパスや有効期限などの追加の属性を保存できます。

Cookieの例を次に示します。

Name: Authentication
Value: AUTHENTICATION_KEY
Domain: careerkarma.com

Cookieはキーと値のペアで保存されます。このCookieを表示すると、次のように表示されます。

Authentication=AUTHENTICATION_KEY

このCookieは、ブラウザにAUTHENTICATION_KEYの値を保存します。ドメインcareerkarma.comにアクセスするたびに、そのCookieがサイトで利用できるようになります。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

サイトに設定できるCookieの数に制限はありませんが、ほとんどのアプリケーションで設定する必要があるのは、あるとしてもいくつかだけです。多くの場合、Cookieはユーザーのセッションを追跡するために使用されます。

ブラウザのCookieを取得する

JavaScriptには、サイトで利用可能なすべてのCookieに関する情報を格納するdocument.cookieというオブジェクトがあります。 Cookieを設定、更新、削除するには、このオブジェクトを操作する必要があります。 Cookieを取得するには、次のオブジェクトを呼び出すだけです。

console.log(document.cookie);

このコードは、ブラウザに設定されているすべてのCookieのリストを返します。カスタム関数を作成せずに、このリストから個々のCookieを取得する方法はありません。

ブラウザのCookieを設定する方法

ブラウザのCookieを設定するにはどうすればよいですか？さて、事前に知っておくべきことが1つあります。それは、自分でCookieを焼くよりも間違いなく簡単です。

ユーザーのメールをCookieに保存するとします。このJavaScriptコードを使用してこれを行うことができます：

document.cookie = "email=user@email.com";
console.log(document.cookie);

このコードは、名前が「email」で値が「user@email.com」のCookieを作成します。 console.log() ステートメントは次を返します：

email=user@email.com;

Cookieを使用できるパスを指定することもできます。

document.cookie = "email=user@email.com; path=/dashboard";

このコードにより、「/dashboard」で始まるすべてのパスで「email」Cookieを使用できるようになります。

Cookieの有効期限

デフォルトでは、ブラウザを閉じるとCookieは削除されます。 Cookieを設定するときに、オプションで有効期限を追加して、この設定を上書きすることができます。

document.cookie = "email=user@email.com; expires=Wed, 24 Jun 2019 12:00:00 UTC";

これにより、2020年6月24日の開始時に有効期限が切れるCookieが作成されます。有効期限はUTC時間で指定する必要があります。

有効期限を設定する一般的な方法の1つは、UTCタイムスタンプを返すJavaScriptDateオブジェクトを使用することです。 2020年6月30日に期限切れになるように設定されたCookieは、次のコードを使用します：

const expiryDate = new Date(2020, 6, 30);
document.cookie = "email=user@email.com; expires=" + expiryDate + ";";

document.cookieオブジェクトは、Cookieの最大有効期間（Max-Age）の設定をサポートしています。これは、有効期限が切れる前にCookieを使用できる期間を示します。すべてのブラウザでサポートされているわけではありませんが、ユーザーがCookieの作成を開始した時期に応じて有効期限が切れるCookieを簡単に作成できます。

const expiryDate= 24 * 60 * 60 * 2;
document.cookie = "email=user@email.com; max-age=" + expiryDate + ";";

これにより、2日後に有効期限が切れるCookieが作成されます。

Cookieの更新と削除

Cookieの更新または削除に使用される関数はありません。代わりに、「document.cookie」オブジェクトに変更を加えます。

作成したのと同じ方法でCookieを更新できます：

document.cookie = "email=user@email.app;"

これにより、「email」の値が「user@email.com」から「user@email.app」に変更されます。

Cookieの削除は、同様のアプローチを使用します。あなたがしなければならないのは、クッキーを作成または更新するために使用されるのと同じ構文を使用することですが、クッキーに割り当てられた値を削除します：

document.cookie = "email=; expires=Wed, 24 Jun 2019 12:00:00 UTC; path/;"

正しいCookieを確実に削除するためにパスを指定する必要があります。

クッキーの種類

ラズベリー。チョコチップ。ファッジ。いいえ、そのような種類のクッキーではありません！ブラウザには、セッション、サードパーティ、永続の3つの主要なタイプのCookieがあります。

セッションCookieは、ブラウザが閉じられるまで存在するCookieです。これらは、最初の例のように、有効期限なしで設定されるCookieです。一部の開発者は「セッションCookie」という用語を使用してユーザーを認証するCookieを指しますが、認証に使用できるCookieはセッションCookieだけではありません。

永続的なCookieは、ブラウザを閉じた後も存在するCookieです。これらは、有効期限が設定されたCookieです。

サードパーティのCookieは、他のWebサイトによって作成されたCookieです。この例は、GoogleAnalyticsのCookieです。サイトにGoogleAnalyticsをインストールすると、拡張機能はユーザーを追跡するためにCookieを設定できるようになります。

結論

Cookieは、ユーザー情報をブラウザーに保存するための便利な方法です。これらは、ユーザーが以前にサイトにアクセスしたことがあるかどうかを追跡したり、認証Cookieを保存したりするためによく使用されます。

Cookieには、セッション、永続、サードパーティの3つの主要なタイプがあります。独自のアプリケーションでは、主にセッションCookieと永続Cookieの使用に重点を置きます。