Cookie とそれらを JavaScript で使用する方法

? ? ? まだちょっと違います… ??? よし！ クッキー ? は、ウェブのお気に入りの絵文字の1つであり、またウェブの最も重要な技術の1つでもあります。

さて、これについて詳しく見てみましょう。

ブラウザクッキーの基礎

ブラウザクッキーは、ユーザーに関する永続的な情報を保持するためにウェブに導入されました。最初のユースケースは、ユーザーがNetscapeのウェブサイトを既に訪問しているかどうかを確認することでした。

クッキーは、名前フィールド、値フィールド、および追加のオプション属性を持つ文字列です。値は文字列であり、アプリケーションに最適と考えるものを保存できます。Google Analyticsの_ga はおそらく最も一般的なクッキーの1つであり、通常は次のようになります：

• 名前: _ga
• 値: GA1.3.210706468.1583989741
• ドメイン: .example.com
• パス: /
• 有効期限 / 最大経過時間: 2022-03-12T05:12:53.000Z

クッキーには最大4096バイトのデータを保存できます（これには名前、値、ドメイン、有効期限などが含まれます）。ブラウザによって異なりますが、ドメインごとに制限された数のクッキーを追加できます。

クッキーはどのように作成されますか

クッキーを作成する主な方法は2つあります：

• HTTPを使用すると、HTTPレスポンスヘッダーにSet-Cookieを送信できます。Webサーバーで使用しているテクノロジーによって異なりますが、クッキーヘッダーを管理するためのさまざまなツールやライブラリを使用できます。これらのツールを使用すると、HTTPレスポンスがおおよそ次のようになります：

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

有効期限などの情報をクッキーに追加できます。また、SecureディレクティブやHttpOnlyフラグなどのセキュリティ機能も設定できます。

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

HttpOnlyフラグは、クッキーをブラウザから読み取ったり変更したりできないことを意味します。また、SecureはクッキーがHTTPS経由でのみ転送されることを意味します。これらはアプリケーションを保護するために非常に重要です。

• Javascriptを使用する場合、クッキーの管理は少し複雑です。私たちのクッキーを保存し再割り当てするdocument.cookieという1つのインタフェースがあります。たとえば、Google Analyticsがインストールされたサイトでは、開発者コンソールで次のようにすることができます：

console.log(document.cookie)
// "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741" のようなものをログに記録

// この等号は期待通りに機能しません
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content" をログに記録
// 前のコード片が新しい作成したクッキーを追加することに注意してください

// クッキーインターフェースのラフな実装は次のようになります:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// 実際の更新のためにはまずクッキーが存在するかどうかを確認します
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

クッキーの種類

セッションクッキー

セッションクッキーは通常、ブラウザが閉じられるまで存在するタイプのクッキーを指します。セッションクッキーを設定するには、有効期限を指定しないだけで十分です。

たとえば、ユーザーの名前をクッキーに保存できます。クッキーにアクセスできる者はユーザーの名前にアクセスできます。クッキーに含まれているので、リクエストに追加する必要はありません。

永続Cookie

永続Cookieは、ユーザーがブラウザを閉じてもブラウザによって削除されません。これらのCookieには、サーバーで設定できる有効期限があります。Cookieの有効期限を1日または10年に設定できます。

サードパーティCookie

同じドメイン上にあるCookieと、サードパーティプロバイダから提供されるCookieを区別することができます。先ほどのGoogle Analyticsの例はサードパーティCookieの例です。サードパーティCookieはユーザーのアクティビティを追跡するために使用できます。サードパーティCookieを設定するには、';domain=thirdpartydomain.com'を設定する必要があります。

CookieのMax-Ageと有効期限

Cookieは通常一時的なものなので、正確な有効期限を設定したい場合があります。2つの戦略があります。

• Expires を使用し、固定の有効期限を設定します。日付はHTTP日付形式を使用します：<day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT。たとえば、2020年9月17日にクッキーを期限切れにしたい場合は、次のようにします：

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• ‘Max-Age’ を使用すると、すべてのブラウザでサポートされているわけではありませんが、最も堅牢な解決策です。これにより、クライアントがそれを受信した後、一定の時間（秒単位）でクッキーが期限切れになるよう強制されます：

// 一日後に期限切れ
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? 以上です！これで、JavaScriptを使用してクライアント側でクッキーを使用する方法がわかりました。ご質問がある場合は、Twitterでお問い合わせください。次回は、クッキーとExpress.jsを使用したセッションの管理方法を見てみましょう。